Component Reference

This document provides a comprehensive reference for all Mimeeq components with their available parts and CSS variables. Use this reference when you need to customize specific components in your implementation.

How to Use This Reference

Each component entry includes:

Description: Brief explanation of the component's purpose
CSS Variables: Style properties that can be customized through CSS variables
Parts: Elements that can be targeted using the ::part() selector
Dependencies: Other components this component relies on

Class Naming Convention

All Mimeeq web components follow a consistent naming convention where each component has a class name that matches its tag name. For example:

The <mmq-button> component has a class .mmq-button
The <mmq-dialog> component has a class .mmq-dialog
The <mmq-side-panel> component has a class .mmq-side-panel

This means you can target components using either tag selectors or class selectors:

/* Using tag selector */
mmq-button {
  --mmq-button-border-radius: 8px;
}

/* Using class selector */
.mmq-button {
  --mmq-button-border-radius: 8px;
}

Using class selectors can be particularly useful when you need to target specific instances of a component or when working with CSS frameworks that have specific selector requirements.

For complete information about styling concepts, see:

Theme Customization - Learn how to use CSS variables
Element Styling - Learn how to use parts
Configurator Customization - Essential styling guide

Components

mmq-accordion

Description: An expandable accordion component for showing and hiding content.

Parts:

icon: The icon element that indicates expand/collapse state.

Dependencies: mmq-icon

mmq-ar-generation-failure

Description: Component displayed when AR model generation has failed.

Parts:

button: The action buttons (go back or try again)
header: The header text explaining the failure
icon: The failure icon
text: The explanatory text with further details

Dependencies: mmq-icon, mmq-formatted-message, mmq-button

mmq-ar-incompatible

Description: Component displayed when the device is not compatible with AR functionality.

Parts:

button: The action button to go back to the product
header: The header text explaining the incompatibility
icon: The device incompatibility icon
text: The explanatory text with further details

Dependencies: mmq-icon, mmq-formatted-message, mmq-button

mmq-ar-loader

Description: Component that handles loading and displaying AR experiences.

Parts:

modal: The AR modal component
portal: The portal element that contains the AR modal

Dependencies: mmq-portal, mmq-ar-modal

Description: Modal that displays a QR code for accessing AR experience on mobile devices.

CSS Variables:

--mmq-background-white: Controls the background color of the dialog
--mmq-box-shadow-primary: Controls the primary box shadow color
--mmq-box-shadow-secondary: Controls the secondary box shadow color
--mmq-dialog-bottom: Controls the bottom position of the dialog
--mmq-dialog-height: Controls the height of the dialog
--mmq-dialog-left: Controls the left position of the dialog
--mmq-dialog-max-height: Controls the maximum height of the dialog
--mmq-dialog-max-width: Controls the maximum width of the dialog
--mmq-dialog-overflow: Controls the overflow behavior of the dialog
--mmq-dialog-position: Controls the position property of the dialog (default: relative)
--mmq-dialog-right: Controls the right position of the dialog
--mmq-dialog-top: Controls the top position of the dialog
--mmq-dialog-width: Controls the width of the dialog
--mmq-dialog-z-index: Controls the z-index stacking order of the dialog

Parts:

copy-icon: The copy icon in the URL field
dialog-content: The content area containing QR code and instructions
dialog-header: The modal header with title
end-adornment: The container for the copy button

Dependencies: mmq-dialog-header, mmq-formatted-message, mmq-dialog-content, mmq-qr-code, mmq-text-field, mmq-input-adornment, mmq-tooltip, mmq-icon

mmq-ar-preview

Description: AR preview component that displays the product image and controls for AR experience.

Parts:

button: The "View in Room" and other action buttons
image: The AR product image
text: The descriptive text about AR functionality

Dependencies: mmq-ar-generation-failure, mmq-formatted-message, mmq-loader, mmq-button

mmq-avatar

Description: A versatile avatar component that displays either an image or text initials.

CSS Variables:

--avatar-size: Controls the width and height of the avatar. Defaults to 30px.
--img-border-radius: Controls the border radius of the avatar image. Set automatically based on variant.

Parts:

image: The inner image element displaying the avatar or logo.
placeholder: The placeholder element shown when no image is available, containing the initials.

Dependencies: mmq-img, mmq-tooltip

mmq-backdrop

Description: A backdrop component that creates an overlay effect.

Dependencies: None

mmq-base-select

Description: Base select component that provides dropdown functionality.

CSS Variables:

--mmq-select-background-color: Background color for the select
--mmq-select-border-color: Border color for the select
--mmq-select-disabled-text-decoration: Text decoration for disabled options
--mmq-select-min-height: Minimum height of the select (default: 38px)
--mmq-select-text-color: Text color for the select

Parts:

avatar: Avatar component for options with images
container: Container for the selected value and input
dropdown-icon: Dropdown arrow icon
hidden-input: Hidden native input for form submission
input: Input element used for search functionality
menu: Dropdown menu container
option: Base part for option elements
placeholder: The placeholder text element
root: The root container of the select component
single-value: Element displaying the selected option
single-value-text: Text element of the selected option

Dependencies: mmq-avatar, mmq-icon, mmq-tooltip, mmq-base-select-menu, mmq-base-select-option, mmq-empty-select-message

Description: Menu component for the base select dropdown.

CSS Variables:

--max-list-height: Maximum height of the options list before scrolling (default: 300px)

Parts:

clear-button: Clear selection button
create-button: Button for creating new options
list: Scrollable list container for options
option: Base part for option elements
plus-icon: Plus icon in the create button

Dependencies: mmq-base-select-option, mmq-button, mmq-icon, mmq-formatted-message

mmq-base-select-option

Description: Option component for items within select dropdown menus.

CSS Variables:

--avatar-size: Size of the avatar for options with images (default: 24px)
--mmq-text-align: Text alignment within the option (default: left)

Parts:

edit-button: Edit button for editable options
radio: Radio button element for radio-style selection
selected-icon: Icon displayed for selected options
zoombox: Zoombox component for option preview

Dependencies: mmq-avatar, mmq-formatted-message, mmq-radio, mmq-icon, mmq-tooltip, mmq-zoombox

mmq-basket

Description: Main basket component with cart functionality.

CSS Variables:

--mmq-basket-z-index: Z index of basket backdrop
--mmq-font-family: Font family to be used

Parts:

backdrop: The backdrop/overlay behind the basket panel
button: The floating basket button
counter: The item counter badge on the basket button
icon: The icon within the basket button
panel: The sliding panel containing basket contents

Dependencies: mmq-basket-button, mmq-backdrop, mmq-basket-panel, mmq-basket-preview

mmq-basket-additions

Description: Displays price modifiers (additions and discounts) for basket items.

Dependencies: mmq-formatted-message, mmq-formatted-price, mmq-tooltip, mmq-icon

mmq-basket-button

Description: Floating button that opens the basket panel.

CSS Variables:

--mmq-basket-btn-z-index: Z index of button
--mmq-basket-button-button-background: Background color
--mmq-basket-button-button-color: Text color
--mmq-basket-button-position-bottom: Distance from bottom of the closest relative parent (by default body)
--mmq-basket-button-position-left: Distance from left edge of the closest relative parent (by default body)
--mmq-basket-button-position-right: Distance from right edge of the closest relative parent (by default body)
--mmq-basket-button-position-top: Distance from top of the closest relative parent (by default body)

Parts:

counter: The item count indicator
icon: The basket icon

Dependencies: mmq-icon

mmq-basket-contact-details

Description: Displays contact information in a structured format.

Parts:

item: Individual contact detail item
item-header: Label for a contact detail
item-note: Notes display
item-price: Price display
item-quantity: Quantity display
item-short-code: Configuration reference code display
item-sku: SKU information display
item-spec: Specification item in contact details
item-unit-price: Unit price display
item-value: Value of a contact detail

Dependencies: mmq-icon

mmq-basket-items

Description: Displays a list of items in the basket.

Parts:

item: Individual basket item
item-description: Container for item description
item-name: Product name display
item-note: Item note field
item-price: Price display
item-quantity: Quantity display
item-short-code: Short code display
item-sku: SKU information display
item-spec: Specification display
item-specs: Container for item specifications
item-thumb: Thumbnail image of the product
item-unit-price: Unit price display
items: Container for all basket items
link: Link to the product

Dependencies: mmq-img, mmq-formatted-message

mmq-basket-panel

Description: Sliding panel that contains the basket contents.

Parts:

additions-title: Title for price additions section
back-button: Back button
cart-item: Individual cart item
close-button: The button to close the panel
close-icon: The close icon
contact-form: The contact form component
empty-basket: Container shown when basket is empty
footer: The panel footer with totals and action buttons
header: The panel header
items: Container for cart items
order-sent: Container shown after order submission
price: The price element
price-container: Container for price information
price-show-less: Button to collapse price details
price-show-more: Button to expand price details
price-title: Label for the price
request: Request element
title: The title in the header

Dependencies: mmq-icon, mmq-formatted-message, mmq-loader, mmq-contact-form, mmq-order-sent, mmq-cart-item, mmq-basket-additions, mmq-formatted-price, mmq-button, mmq-empty-basket, mmq-toast-container

mmq-basket-preview

Description: Preview of the basket contents and order details.

Parts:

body: The main body containing items and contact information
close-button: Button to close the preview
close-icon: Icon for the close button
content: The main content container
footer: The footer with totals and action buttons
header: The preview header with order information
price: The price display element

Dependencies: mmq-loader, mmq-icon, mmq-formatted-message, mmq-generic-tabs, mmq-basket-contact-details, mmq-basket-items, mmq-formatted-price, mmq-tooltip, mmq-button

mmq-button

Description: A customizable button component with various styles and states.

CSS Variables:

--mmq-button-bg-hover: Controls the background color on hover. Set by variants.
--mmq-button-border-radius: Controls the border radius of the button. Defaults to 4px.
--mmq-button-color: Controls the text color of the button. Defaults to var(--mmq-typography-primary).
--mmq-button-contrast-color: Controls the text color when button has a colored background. Defaults to var(--mmq-common-white).
--mmq-button-font: Controls the font size of the button. Defaults to var(--mmq-font-size-regular, 0.875rem).
--mmq-button-font-weight: Controls the font weight of the button. Defaults to 600.
--mmq-button-gap: Controls the gap between the icon and text. Defaults to 4px.
--mmq-button-height: Controls the height of the button. Defaults to auto.
--mmq-button-outline-color: Controls the outline color for outlined variant. Defaults to var(--mmq-button-color).
--mmq-button-padding: Controls the padding of the button. Defaults to 0.
--mmq-button-padding-small: Controls the padding of the small variant button. Defaults to 10px 24px.
--mmq-button-width: Controls the width of the button. Defaults to auto.
--mmq-loader-color: Controls the color of the loader when submitting. Defaults to var(--mmq-button-color).

Dependencies: mmq-loader, mmq-tooltip

mmq-canvas-buttons

Description: Container for buttons displayed on the canvas.

Parts:

warning-3d: The 3D warning component
zoom-all: The zoom all button component
zoom-buttons: The zoom buttons component

Dependencies: mmq-zoom-all, mmq-zoom-buttons, mmq-warning-3d

mmq-cart-item

Description: Displays an individual item in the shopping cart.

Parts:

description: Product description container
header: Product title
image: The product image
image-wrapper: Container for the product image
link: Link to the product
note: Notes input field
prices: Container for price information
qty: Quantity controls container
qty-input: Quantity input field
remove-button: Button to remove the item
remove-icon: Remove button icon
specification: Container for specification details
specification-button: Button to toggle specifications
specification-button-icon: Icon in the specification button
specification-item: Individual specification item

Dependencies: mmq-loader, mmq-img, mmq-number-input, mmq-formatted-message, mmq-formatted-price, mmq-icon, mmq-tooltip, mmq-text-field

mmq-checkbox

Description: Checkbox component for selecting options.

CSS Variables:

--checkbox-active-color: Color for the checked state
--checkbox-color: Color for the unchecked state
--checkbox-margin: Margin around the checkbox
--mmq-checkbox-size: Size of the checkbox (default: 24px, 14px for small)

Parts:

checked-icon: Icon displayed when checkbox is checked
indeterminate-icon: Icon displayed when checkbox is in indeterminate state
switch: The switch base component
unchecked-icon: Icon displayed when checkbox is unchecked

Dependencies: mmq-switch-base, mmq-icon

Description: Modal displayed when there's a collision or conflict in the configuration.

CSS Variables:

--mmq-background-white: Controls the background color of the dialog
--mmq-box-shadow-primary: Controls the primary box shadow color
--mmq-box-shadow-secondary: Controls the secondary box shadow color
--mmq-dialog-bottom: Controls the bottom position of the dialog
--mmq-dialog-content-padding: Controls the padding of the content area
--mmq-dialog-footer-padding: Controls the padding of the footer area
--mmq-dialog-height: Controls the height of the dialog
--mmq-dialog-left: Controls the left position of the dialog
--mmq-dialog-margin: Controls the margin around the dialog
--mmq-dialog-max-height: Controls the maximum height of the dialog
--mmq-dialog-max-width: Controls the maximum width of the dialog
--mmq-dialog-mobile-margin: Controls the margin on mobile devices
--mmq-dialog-overflow: Controls the overflow behavior of the dialog
--mmq-dialog-padding: Controls the padding inside the dialog
--mmq-dialog-position: Controls the position property of the dialog (default: relative)
--mmq-dialog-right: Controls the right position of the dialog
--mmq-dialog-top: Controls the top position of the dialog
--mmq-dialog-width: Controls the width of the dialog
--mmq-dialog-z-index: Controls the z-index stacking order of the dialog

Parts:

button: The button used to close the modal
content: The content section of the modal
footer: The footer section containing action buttons
header: The header text of the modal
icon: The collision icon displayed in the modal

Dependencies: mmq-dialog-content, mmq-icon, mmq-formatted-message, mmq-dialog-footer, mmq-button

mmq-color-alpha

Description: Component for alpha (transparency) control in color pickers.

Dependencies: None

mmq-color-picker

Description: Color selection component with advanced color picking capabilities.

CSS Variables:

--mmq-color-picker-inset: Controls the positioning of the floating color picker. Defaults to initial 0 initial 0.
--mmq-color-picker-width: Controls the width of the color picker. Defaults to 100% for inline, auto for floating.
--mmq-swatch-color: Sets the background color for color swatches.

Dependencies: mmq-saturation, mmq-hue, mmq-color-alpha

Description: Color selection component with color picker functionality.

Parts:

dialog: Dialog container for the mobile color picker
dialog-content: Content area of the color picker dialog
dialog-header: Header of the color picker dialog
picker: The color picker component
portal: Portal for the mobile color picker
textfield: The text field displaying the selected color
tooltip: The tooltip containing the color picker

Dependencies: mmq-text-field, mmq-input-adornment, mmq-icon, mmq-portal, mmq-dialog, mmq-dialog-header, mmq-dialog-content, mmq-color-picker, mmq-tooltip

mmq-components-mapper

Description: Maps different widget types to their respective UI components.

Parts:

color: The color picker widget
engrave: The engrave component
filter: The filter component
filter-groups: The filter with groups component
header: The component header displaying the option set name
image: The texture/image widget
input: The input widget component
message: The message widget
multichoice: The multichoice field set container
multichoice-item: Individual multichoice item
print-on-demand: The print on demand component
radio-numbers: The radio numbers component for number selection
radio-option: Individual option in the radio group
radio-plain: The plain radio button group
radio-scale: The radio scale component for scale selection
select-listbox: The select widget for listbox type
select-radio: The select widget with radio interface
thumbnail-label: The label element within thumbnails
thumbnails: The thumbnails component
thumbnails-groups: The thumbnails with groups component

Dependencies: mmq-radio-numbers, mmq-radio-scale, mmq-form-field-set, mmq-multichoice-item, mmq-radio-plain, mmq-select-widget, mmq-thumbnails, mmq-thumbnails-groups, mmq-filter, mmq-engrave, mmq-input-widget, mmq-texture-widget, mmq-print-on-demand, mmq-color-picker-widget, mmq-message-widget

mmq-contact-form

Description: Form for collecting contact and order details.

Parts:

checkbox: Checkbox input fields
dropdown: Dropdown select fields
field-set: The main form field container
footer: The form footer with totals and submit button
footer-buttons: Container for footer action buttons
footer-field-set: Field set in the footer section
price: The price element
price-container: Container for price information
price-show-less: Button to show fewer price details
price-show-more: Button to show more price details
price-title: Price title label
submit: The submit button
text-field: Text input fields

Dependencies: mmq-text-field, mmq-formatted-message, mmq-select, mmq-form-control-label, mmq-checkbox, mmq-loader, mmq-form-field-set, mmq-basket-additions, mmq-formatted-price, mmq-tooltip, mmq-button

mmq-context-provider

Description: Provides context for internationalization and user authentication.

Parts:

anchor: Anchor elements used in formatted messages

Dependencies: None

mmq-dialog

Description: A customizable dialog/modal component.

CSS Variables:

--mmq-background-white: Controls the background color of the dialog
--mmq-box-shadow-primary: Controls the primary box shadow color
--mmq-box-shadow-secondary: Controls the secondary box shadow color
--mmq-dialog-bottom: Controls the bottom position of the dialog
--mmq-dialog-height: Controls the height of the dialog. Defaults to 570px on desktop.
--mmq-dialog-inset: Controls the inset positioning when used with position: absolute. Optional.
--mmq-dialog-left: Controls the left position of the dialog
--mmq-dialog-margin: Controls the margin around the dialog. Defaults to auto.
--mmq-dialog-max-height: Controls the maximum height of the dialog
--mmq-dialog-max-width: Controls the maximum width of the dialog
--mmq-dialog-mobile-margin: Controls the margin around the dialog on mobile. Defaults to auto 16px.
--mmq-dialog-overflow: Controls the overflow behavior of the dialog
--mmq-dialog-padding: Controls the padding inside the dialog. Defaults to 0.
--mmq-dialog-position: Controls the position property of the dialog (default: relative)
--mmq-dialog-right: Controls the right position of the dialog
--mmq-dialog-top: Controls the top position of the dialog
--mmq-dialog-width: Controls the width of the dialog. Defaults to 570px on desktop.
--mmq-dialog-z-index: Controls the z-index stacking order of the dialog

Dependencies: None

mmq-dialog-content

Description: Content container for the dialog component.

CSS Variables:

--mmq-dialog-content-background: Controls the background color of the content. Defaults to transparent.
--mmq-dialog-content-height: Controls the height of the content area. Defaults to auto, or calc(100% - 140px) when withActions is true.
--mmq-dialog-content-margin: Controls the margin around the content area. Defaults to 0.
--mmq-dialog-content-mobile-height: Controls the height on mobile devices. Defaults to auto.
--mmq-dialog-content-overflow: Controls the overflow behavior. Defaults to auto.
--mmq-dialog-content-padding: Controls the padding inside the content area. Defaults to 9px (desktop) or 24px 16px (mobile).

Dependencies: None

Description: Footer component for dialogs with action buttons.

CSS Variables:

--mmq-dialog-footer-justify: Controls the justification of footer content. Defaults to space-between.
--mmq-dialog-footer-padding: Controls the padding inside the footer. Defaults to 0 24px (desktop) or 16px (mobile).
--mmq-dialog-footer-padding-top: Controls the top padding when using border-top variation. Defaults to 16px.

Dependencies: None

Description: Header component for dialogs with title and close button.

CSS Variables:

--mmq-dialog-header-background: Controls the background color of the header. Optional.
--mmq-dialog-header-height: Controls the minimum height of the header on desktop. Defaults to 60px.
--mmq-dialog-header-justify: Controls the justification of header content. Defaults to space-between.
--mmq-dialog-header-padding: Controls the padding inside the header. Defaults to 10px 24px (mobile) or 16px 24px (desktop).
--mmq-dialog-header-position: Controls the positioning of the header. Defaults to static.
--mmq-dialog-header-top: Controls the top position when using fixed or absolute positioning. Defaults to 0.
--mmq-wrap-lines: Controls how many lines are shown before truncating when using multiline wrap. Defaults to 2.

Parts:

close-button: The close button element.
close-icon: The close icon inside the close button.
title: The title element of the header.

Dependencies: mmq-button, mmq-icon

mmq-document

Description: Component for displaying document-related content.

CSS Variables:

--mmq-document-icon-color: Color of the document icon (default: currentColor)
--mmq-document-name-color: Color of the document name (default: var(--mmq-typography-primary))
--mmq-document-size-color: Color of the document size text (default: var(--mmq-typography-secondary))

Dependencies: mmq-loader, mmq-icon

Description: Menu component for additional options displayed as dots.

Parts:

button: The dot menu button
icon: The dots icon

Dependencies: mmq-quick-icon-button, mmq-icon, mmq-portal, mmq-dot-menu-content

Description: Content container for the dot menu options.

CSS Variables:

--mmq-dot-menu-height: Height of the dot menu on mobile (calculated based on available space)

Parts:

gradient: The gradient overlay at the bottom of the menu
quick-icons: The quick icons list within the menu

Dependencies: mmq-quick-icons

Description: Tooltip indicating drag interaction is available.

CSS Variables:

--drag-tooltip-bottom: Position from the bottom (default: 30px)

Parts:

icon: The drag icon

Dependencies: mmq-icon, mmq-formatted-message

mmq-drawer

Description: A sliding drawer component that appears from the side of the screen.

CSS Variables:

--mmq-basket-drawer-width: Controls the width of the drawer. Defaults to 400px for single variant, 900px for double variant.
--mmq-dialog-content-height: Controls the height of the content area within the drawer. Adjusts based on header size.
--mmq-dialog-header-padding: Controls the padding of the header in the drawer. Can be customized for different screen sizes.

Parts:

content: The content section of the drawer.
header: The header section of the drawer.
icon: The icon used for resizing the drawer.

Dependencies: mmq-icon, mmq-dialog-header, mmq-dialog-content

Description: Individual item in a dropdown menu.

CSS Variables:

--mmq-dropdown-item-after-content: Content for the pseudo-element separator (default: '')

Parts:

label: The text label of the dropdown item

Dependencies: None

mmq-element-item

Description: Component for displaying element items.

Dependencies: mmq-img, mmq-formatted-message, mmq-formatted-price, mmq-icon

Description: Modal for displaying a list of elements.

CSS Variables:

--mmq-dialog-content-height: Controls the height of the dialog content
--mmq-dialog-content-padding: Controls the padding of the dialog content area
--mmq-dialog-header-height: Controls the height of the dialog header
--mmq-dialog-header-padding: Controls the padding of the dialog header
--mmq-dialog-height: Controls the overall height of the dialog
--mmq-dialog-max-height: Controls the maximum height of the dialog based on top and bottom values
--mmq-dialog-top: Controls the top position of the dialog
--mmq-dialog-z-index: Controls the stacking order of the dialog
--mmq-loader-color: Controls the color of the loader component
--mmq-modular-elements-dialog-bottom: Controls the bottom margin for the dialog
--product-tile-border: Controls the border color of product tiles
--product-tile-border-radius: Controls the border radius of product tiles

Parts:

categories: Categories section
dialog: The main dialog container
dialog-content: The content section of the dialog containing the product list
dialog-header: The header section of the dialog
element-list-search: The search field for filtering products
nativeInput: The native input element within the search field
notch: The notch element of the search input
outline: The outline of the search input
sort-list-button: The button for sorting the product list
textarea: The text area input within the search field

Dependencies: mmq-dialog, mmq-dialog-header, mmq-formatted-message, mmq-dialog-content, mmq-select, mmq-input-adornment, mmq-icon, mmq-text-field, mmq-tooltip, mmq-popover-menu, mmq-popover-menu-item, mmq-mobile-search, mmq-product-tile

mmq-empty-basket

Description: Display for empty basket state.

Parts:

description: The explanatory text with further details
explore-button: The button to explore products
header: The header text indicating the basket is empty
icon: The empty basket icon

Dependencies: mmq-icon, mmq-formatted-message, mmq-button

mmq-empty-select-message

Description: Message displayed when a select dropdown has no options.

Dependencies: None

mmq-engrave

Description: Engraving customization component for text engraving options.

Parts:

blur: Input for engraving blur/sharpness (debug mode)
field-set: Container for the engraving fields
font-family: Dropdown for font family selection
font-style: Dropdown for font style selection
level: Input for engraving level (debug mode)
strength: Input for engraving strength (debug mode)
text: Text input fields for the engraving text

Dependencies: mmq-text-field, mmq-formatted-message, mmq-form-field-set, mmq-select

Description: Modal for displaying error messages.

CSS Variables:

--mmq-background-white: Controls the background color of the dialog
--mmq-box-shadow-primary: Controls the primary box shadow color
--mmq-box-shadow-secondary: Controls the secondary box shadow color
--mmq-dialog-bottom: Controls the bottom position of the dialog
--mmq-dialog-content-padding: Sets the padding for the content area of the modal
--mmq-dialog-footer-padding: Sets the padding for the footer area of the modal
--mmq-dialog-height: Controls the height of the dialog
--mmq-dialog-height: Controls the height of the error modal dialog
--mmq-dialog-left: Controls the left position of the dialog
--mmq-dialog-margin: Sets the margin around the error modal
--mmq-dialog-max-height: Controls the maximum height of the dialog
--mmq-dialog-max-width: Controls the maximum width of the dialog
--mmq-dialog-mobile-margin: Sets the margin for the error modal on mobile devices
--mmq-dialog-overflow: Controls the overflow behavior of the dialog
--mmq-dialog-padding: Sets the padding inside the error modal
--mmq-dialog-position: Controls the position property of the dialog (default: relative)
--mmq-dialog-right: Controls the right position of the dialog
--mmq-dialog-top: Controls the top position of the dialog
--mmq-dialog-width: Controls the width of the dialog
--mmq-dialog-width: Controls the width of the error modal on desktop
--mmq-dialog-z-index: Controls the z-index stacking order of the dialog

Parts:

button: The action button in the footer
content: The content container of the error modal
footer: The footer container with action buttons
header: The header text of the error modal
icon: The icon displayed in the error modal

Dependencies: mmq-dialog-content, mmq-icon, mmq-formatted-message, mmq-dialog-footer, mmq-button

mmq-error-wrapper

Description: Wrapper component for displaying errors.

Dependencies: None

Description: Modal for exporting images with various format options.

CSS Variables:

--mmq-background-white: Controls the background color of the dialog
--mmq-box-shadow-primary: Controls the primary box shadow color
--mmq-box-shadow-secondary: Controls the secondary box shadow color
--mmq-button-padding-small: Controls the padding of small buttons
--mmq-dialog-bottom: Controls the bottom position of the dialog
--mmq-dialog-content-padding: Controls the padding of the dialog content area
--mmq-dialog-footer-padding: Controls the padding of the dialog footer area
--mmq-dialog-header-height: Controls the height of the dialog header
--mmq-dialog-header-padding: Controls the padding of the dialog header
--mmq-dialog-height: Controls the height of the dialog
--mmq-dialog-left: Controls the left position of the dialog
--mmq-dialog-margin: Controls the margin around the dialog
--mmq-dialog-max-height: Controls the maximum height of the dialog
--mmq-dialog-max-width: Controls the maximum width of the dialog
--mmq-dialog-mobile-margin: Controls the margin on mobile devices
--mmq-dialog-overflow: Controls the overflow behavior of the dialog
--mmq-dialog-padding: Controls the padding inside the dialog
--mmq-dialog-position: Controls the position property of the dialog (default: relative)
--mmq-dialog-right: Controls the right position of the dialog
--mmq-dialog-top: Controls the top position of the dialog
--mmq-dialog-width: Controls the width of the dialog (desktop only)
--mmq-dialog-width: Controls the width of the dialog
--mmq-dialog-z-index: Controls the z-index stacking order of the dialog

Parts:

button: Action buttons in the footer
content: The content section of the modal
footer: The footer section with action buttons
format: Individual format option container
formats: Container for the format options
header: The header section of the modal
radio-option: Radio option for image settings
submit-button: The submit/export button

Dependencies: mmq-dialog-header, mmq-formatted-message, mmq-dialog-content, mmq-icon, mmq-radio-option, mmq-dialog-footer, mmq-button

Description: Modal for exporting 3D models with various format options.

CSS Variables:

--mmq-background-white: Controls the background color of the dialog
--mmq-box-shadow-primary: Controls the primary box shadow color
--mmq-box-shadow-secondary: Controls the secondary box shadow color
--mmq-button-padding-small: Controls the padding of small buttons
--mmq-dialog-bottom: Controls the bottom position of the dialog
--mmq-dialog-content-padding: Controls the padding of the dialog content area
--mmq-dialog-footer-padding: Controls the padding of the dialog footer area
--mmq-dialog-header-height: Controls the height of the dialog header
--mmq-dialog-header-padding: Controls the padding of the dialog header
--mmq-dialog-height: Controls the height of the dialog
--mmq-dialog-left: Controls the left position of the dialog
--mmq-dialog-margin: Controls the margin around the dialog
--mmq-dialog-max-height: Controls the maximum height of the dialog
--mmq-dialog-max-width: Controls the maximum width of the dialog
--mmq-dialog-mobile-margin: Controls the margin on mobile devices
--mmq-dialog-overflow: Controls the overflow behavior of the dialog
--mmq-dialog-padding: Controls the padding inside the dialog
--mmq-dialog-position: Controls the position property of the dialog (default: relative)
--mmq-dialog-right: Controls the right position of the dialog
--mmq-dialog-top: Controls the top position of the dialog
--mmq-dialog-width: Controls the width of the dialog (desktop only)
--mmq-dialog-width: Controls the width of the dialog
--mmq-dialog-z-index: Controls the z-index stacking order of the dialog

Parts:

button: Action buttons in the footer
content: The content section of the modal
footer: The footer section with action buttons
format: Individual format option container
formats: Container for the format options
header: The header section of the modal
submit-button: The submit/export button

Dependencies: mmq-dialog-header, mmq-formatted-message, mmq-dialog-content, mmq-icon, mmq-dialog-footer, mmq-button

Description: Modal for exporting PDF documents with various format options.

CSS Variables:

--header-button-height: Controls the height of header buttons (price settings)
--header-button-width: Controls the width of header buttons (price settings)
--mmq-background-white: Controls the background color of the dialog
--mmq-box-shadow-primary: Controls the primary box shadow color
--mmq-box-shadow-secondary: Controls the secondary box shadow color
--mmq-button-padding-small: Controls the padding of small buttons
--mmq-dialog-bottom: Controls the bottom position of the dialog
--mmq-dialog-content-padding: Controls the padding of the dialog content area
--mmq-dialog-footer-padding: Controls the padding of the dialog footer area
--mmq-dialog-header-height: Controls the height of the dialog header
--mmq-dialog-header-padding: Controls the padding of the dialog header
--mmq-dialog-height: Controls the height of the dialog
--mmq-dialog-left: Controls the left position of the dialog
--mmq-dialog-margin: Controls the margin around the dialog
--mmq-dialog-max-height: Controls the maximum height of the dialog
--mmq-dialog-max-width: Controls the maximum width of the dialog
--mmq-dialog-mobile-margin: Controls the margin on mobile devices
--mmq-dialog-overflow: Controls the overflow behavior of the dialog
--mmq-dialog-padding: Controls the padding inside the dialog
--mmq-dialog-position: Controls the position property of the dialog (default: relative)
--mmq-dialog-right: Controls the right position of the dialog
--mmq-dialog-top: Controls the top position of the dialog
--mmq-dialog-width: Controls the width of the dialog (desktop only)
--mmq-dialog-width: Controls the width of the dialog
--mmq-dialog-z-index: Controls the z-index stacking order of the dialog

Parts:

button: Action buttons in the footer
checkbox: Checkbox input elements
content: The content section of the modal
footer: The footer section with action buttons
formats: Container for the format options
header: The header section of the modal
item: Individual item in the formats list
item-icon: Icon for a draggable item
label: Label for checkbox options
submit-button: The submit/export button

Dependencies: mmq-dialog-header, mmq-formatted-message, mmq-price-settings-button, mmq-dialog-content, mmq-form-control-label, mmq-checkbox, mmq-icon, mmq-dialog-footer, mmq-button, mmq-pdf-loader

mmq-fade-text

Description: Component for displaying text with a fade effect.

CSS Variables:

--mmq-fade-text-height: Height of the fade text element (default: 56px)

Dependencies: None

mmq-filter

Description: Filter component for finding and selecting options.

Parts:

filter-button: Button to activate the filter
filter-widget: The filter widget component
modal-filter: Modal container for filter options
portal: Portal for the filter modal
wrapper: Main container for the filter

Dependencies: mmq-filter-button, mmq-portal, mmq-modal-filter, mmq-filter-widget

mmq-filter-button

Description: Button that activates filter selection.

Parts:

button: The filter button element
icon: The filter icon
img: The image preview in the button
name: The filter name
option: The selected option display

Dependencies: mmq-img, mmq-icon

Description: Widget that displays filterable options.

Parts:

filter-button: Filter activation button
filter-grid: Grid container for filter options
icon: Filter icon

Dependencies: mmq-icon, mmq-formatted-message, mmq-portal, mmq-modal-filters-portal, mmq-filter-widget-grid

Description: Grid layout for filter widget options.

Parts:

section-title: Title for a section of filter options

Dependencies: mmq-tooltip, mmq-thumbnail-item

mmq-form-control

Description: Base component for form controls.

CSS Variables:

--form-control-column-span: Grid column span for the form control
--form-control-width: Width of the form control

Dependencies: None

mmq-form-control-label

Description: Label component for form controls.

CSS Variables:

--form-control-label-margin: Margin applied to the label (default: 0)
--mmq-label-checked-weight: Font weight when control is checked (default: 500)

Dependencies: mmq-formatted-message

mmq-form-field-set

Description: Container for grouping form fields.

CSS Variables:

--columns: Number of columns in the grid layout (default: 2)
--field-set-column-gap: Gap between columns (default: 32px)
--field-set-margin: Margin around the field set (default: 12px 0 on mobile, 24px 0 on desktop)
--field-set-padding: Padding around the field set (default: 0)
--field-set-row-gap: Gap between rows (default: 20px)

Dependencies: None

mmq-form-helper-text

Description: Helper text component for form fields.

CSS Variables:

--mmq-helper-text-margin: Margin for the helper text (default: 4px 0 0 0)

Dependencies: None

mmq-form-label

Description: Label component for form elements.

Dependencies: None

mmq-form-legend

Description: Legend component for fieldset elements.

CSS Variables:

--mmq-form-legend-margin: Margin around the legend (default: 0 0 24px 0)
--mmq-form-legend-padding: Padding around the legend (default: 0)
--mmq-form-legend-weight: Font weight for the legend (default: 500)
--mmq-form-legend-width: Width of the legend (default: initial)

Dependencies: None

mmq-formatted-message

Description: Component for displaying localized and formatted text messages.

Dependencies: None

mmq-formatted-price

Description: Component for displaying formatted price values.

Dependencies: None

mmq-full-screen-button

Description: Button for entering or exiting fullscreen mode.

Parts:

button: The fullscreen button

Dependencies: mmq-quick-icon-button, mmq-icon

mmq-gallery

Description: Gallery component for displaying images and videos.

Dependencies: mmq-youtube, mmq-vimeo, mmq-img

mmq-generic-tabs

Description: A tabs component for organizing content into separate views.

Parts:

tab-button: An individual tab button.
tabs: The container for all tabs.
tabs-list: The horizontal list of tab buttons.

Dependencies: None

mmq-header-button

Description: Button component used in headers.

CSS Variables:

--header-button-bg: Background color of the button (default: transparent)
--header-button-border-color: Border color of the button (default: transparent)
--header-button-color: Color of the button (default: var(--mmq-grey-500))
--header-button-height: Height of the button (default: auto)
--header-button-width: Width of the button (default: auto)

Parts:

button: The button element

Dependencies: mmq-tooltip

Description: Modal displayed when clicking on a hotspot.

CSS Variables:

--above-bottom: Bottom boundary adjustment
--abs-bottom-distance: Absolute value of bottom distance
--bottom: Bottom edge position calculation
--bottom-distance: Distance from bottom calculation
--in-bottom-bounding: Check if within bottom boundary
--in-right-bounding: Check if within right boundary
--in-top-bounding: Check if within top boundary
--in-viewport-y: Check if vertically within viewport
--initial-left: Left position calculation including offset
--left: Final left position calculation
--left-offset: Offset from the hotspot control on larger screens
--mmq-dialog-content-height: Controls the height of the dialog content
--mmq-dialog-content-padding: Controls the padding of the dialog content
--mmq-dialog-mobile-margin: Controls the margin on mobile devices
--mmq-dialog-top: Controls the distance from the top for positioning
--mmq-hotspot-modal-container-height: Controls the height of the container for positioning calculations
--mmq-hotspot-modal-container-width: Controls the width of the container for positioning calculations
--mmq-hotspot-modal-position: Controls the position type of the modal (default: absolute)
--mmq-hotspot-modal-x: Controls the horizontal position of the hotspot modal
--mmq-hotspot-modal-y: Controls the vertical position of the hotspot modal
--mmq-loader-color: Controls the color of the loader
--move-left: Horizontal transform calculation
--move-top: Vertical transform calculation
--negative-very-big-int: Utility value used for positioning calculations
--right: Right edge position calculation
--top: Final top position calculation
--under-top: Top boundary adjustment
--very-big-int: Utility value used for positioning calculations
--width: Controls the width of the modal on desktop
--y: Vertical position calculation

Parts:

dialog: The main dialog container
dialog-content: The content section of the dialog
dialog-header: The header section of the dialog

Dependencies: mmq-dialog, mmq-dialog-header, mmq-icon, mmq-tooltip, mmq-formatted-message, mmq-dialog-content, mmq-loader, mmq-gallery, mmq-document

mmq-hue

Description: Component for hue selection in color pickers.

Dependencies: None

mmq-icon

Description: Icon component for displaying SVG icons.

CSS Variables:

--mmq-icon-font-size: Controls the font size of the icon. Defaults to inherit.
--mmq-icon-height: Controls the height of the icon. Defaults to 1em.
--mmq-icon-width: Controls the width of the icon. Defaults to 1em.

Dependencies: None

mmq-image-configurator

Description: Configuration tools for adjusting image properties.

Parts:

field-set: Container for the image configuration controls
flip-horizontally-icon: Icon for horizontal flip
flip-vertically-icon: Icon for vertical flip
icon-button: Individual action buttons
icons: Container for the action icons
label: Labels for the control sliders
reset-icon: Icon for resetting adjustments
slider: Slider controls for image adjustments
trash-icon: Icon for removing the image

Dependencies: mmq-form-field-set, mmq-form-control-label, mmq-formatted-message, mmq-slider, mmq-button, mmq-icon

mmq-image-panel-footer

Description: Panel that displays product information and controls in the image view.

CSS Variables:

--mmq-footer-thumbnail-border: Border style for thumbnails in the footer. Default is 1px solid var(--mmq-scrollbar-primary).
--mmq-quick-icon-background: Controls the background color of the quick icon, it takes color value in rgba format, by default it is 46, 51, 65, 0.05

Parts:

ar-button: Button that launches AR view.
ar-icon: Icon inside the AR button.
ar-text: Text displayed inside the AR button.
brand: Element that displays the brand name.
carousel: Container for the thumbnail carousel.
carousel-arrow-left: Left navigation arrow for the carousel.
carousel-arrow-right: Right navigation arrow for the carousel.
carousel-indicator: Individual indicator/dot for the carousel.
carousel-indicators: Container for the carousel position indicators/dots.
carousel-thumb: Individual thumbnail image in the carousel.
carousel-thumb-3d: Special thumbnail representing the 3D view.
carousel-thumbs: Container for the thumbnail images.
carousel-wrapper: Wrapper element for the carousel content.
drag-tooltip: The tooltip displayed in 3D mode indicating drag interaction is available.
name-wrapper: Container for product name and brand information.
product-name: Element that displays the product name.

Dependencies: mmq-drag-tooltip, mmq-button, mmq-icon, mmq-formatted-message

Description: Lightbox component for displaying enlarged images.

Dependencies: None

mmq-img

Description: A responsive image component with loading state and placeholder support.

CSS Variables:

--img-border-radius: Controls the border radius of the image. Set by variant, defaults to 0.
--mmq-loader-color: Controls the color of the loader. Defaults to var(--mmq-accent-main, #1762d4).
--mmq-loader-size: Controls the size of the loader when image is loading. Defaults to 24px.

Parts:

image: The inner img element.

Dependencies: mmq-loader

mmq-img-download-button

Description: Button component for downloading images.

Dependencies: mmq-tooltip, mmq-icon, mmq-formatted-message

mmq-inline-notification

Description: A versatile notification component for displaying messages with different severity levels.

CSS Variables:

--mmq-inline-notification-max-width: Controls the maximum width of the notification. Defaults to 400px (desktop) or calc(100vw - 32px) (mobile).
--mmq-inline-notification-padding: Controls the padding inside the notification. Defaults to 10px 16px (desktop) or 8px 16px 8px 12px (mobile).
--mmq-inline-notification-text-padding: Controls the padding around the text content. Defaults to 4px 8px (desktop) or 2px 8px (mobile).
--mmq-notification-action: Controls the color of the action button. Defaults to var(--mmq-accent-main, #1762d4).
--mmq-notification-action-dark: Controls the color of the action button in dark mode. Defaults to var(--mmq-grey-100, #ededee).
--mmq-notification-error-bg: Controls the background color for error type notifications. Defaults to var(--mmq-background-danger, #fef6f5).
--mmq-notification-error-color: Controls the border color for error type notifications. Defaults to var(--mmq-error-700, #ef8277).
--mmq-notification-error-icon-color: Controls the icon color for error type notifications. Defaults to var(--mmq-error-main, #e74c3c).
--mmq-notification-info-bg: Controls the background color for info type notifications. Defaults to #f3f7fd.
--mmq-notification-info-color: Controls the border color for info type notifications. Defaults to #5d92e1.
--mmq-notification-info-icon-color: Controls the icon color for info type notifications. Defaults to var(--mmq-color-blue, #1762d4).
--mmq-notification-success-bg: Controls the background color for success type notifications. Defaults to #f6fcf6.
--mmq-notification-success-color: Controls the border color for success type notifications. Defaults to #80d38c.
--mmq-notification-success-icon-color: Controls the icon color for success type notifications. Defaults to var(--mmq-success-main, #49bf5a).
--mmq-notification-warning-bg: Controls the background color for warning type notifications. Defaults to #fefbf4.
--mmq-notification-warning-color: Controls the border color for warning type notifications. Defaults to #fcc567.
--mmq-notification-warning-icon-color: Controls the icon color for warning type notifications. Defaults to var(--mmq-warning, #faac25).

Parts:

action: The action button.
close-icon: The close icon for dismissing the notification.
description: The description text of the notification.
lead-icon: The icon displayed at the start of the notification.
progress: The progress indicator displayed when autoClose is enabled.
separator: The separator line between title and action (when bordered is true).
title: The title of the notification.

Dependencies: mmq-icon, mmq-button

mmq-input

Description: Base input component for text entry.

CSS Variables:

--form-control-column-span: Grid column span for the form control
--form-control-width: Width of the form control
--mmq-input-line-height: Line height for the input text (default: 20px)
--mmq-input-native-padding: Padding for the native input element
--mmq-input-native-placeholder-padding: Padding for the input when placeholder is shown

Parts:

input: The native input element
notch: The notch in the outline for the label
outline: The outline element for the outlined variant
shadow-textarea: Hidden textarea used for height calculations in multiline mode
textarea: The native textarea element when multiline is enabled

Dependencies: mmq-tooltip

mmq-input-adornment

Description: Decorative element that can be added to the start or end of input fields.

CSS Variables:

--mmq-adornment-font-size: Font size for the adornment (inherited by default)

Parts:

text: The text content of the adornment

Dependencies: None

mmq-input-label

Description: Label component for input fields.

CSS Variables:

--mmq-label-offset-x: Horizontal offset for the label (default: 0)
--mmq-label-outlined-offset-x: Horizontal offset for outlined variant labels (default: 16px)

Parts:

label: The form label element

Dependencies: mmq-form-label

Description: Text or number input widget for custom values.

Parts:

field-set: Container for the input field
text-field: The input field element

Dependencies: mmq-form-field-set, mmq-text-field, mmq-formatted-message

mmq-item-button

Description: Button component used in item lists.

CSS Variables:

--active-gradient: Background color for the active item button
--mmq-group-active-color: Background color for active group (default: var(--active-gradient, #f2f6ff))
--mmq-group-hover-color: Background color for hover state (default: var(--mmq-grey-50, #f4f4f4))
--mmq-group-hover-group-text-color: Color of text on hover, set to "WHITE" for white text
--mmq-group-opened-group-text-color: Color of text when group is opened, set to "WHITE" for white text
--mmq-group-options-font-size: Font size for the group options (default: var(--mmq-font-size-header, 10px))
--mmq-item-buton-border-top-height: Height of the top border in desktop view (default: 0)
--mmq-item-button-color: Background color for the item button placeholder
--mmq-item-button-padding: Padding for the item button wrapper (default: 8px 16px)
--mmq-item-button-padding-first: Padding for the first item button in the list (default: 16px 16px 8px)
--mmq-option-button-font-weight: Font weight for the option button (default: 500)
--mmq-option-button-font-weight-selected: Font weight for the selected option button (default: 700)

Dependencies: mmq-img, mmq-icon, mmq-formatted-message

mmq-item-groups

Description: Item Groups component that displays widget groups for configuration options.

Parts:

block-header: Header for blocks
color: Color widget part
components-mapper: Container for component mapper elements
engrave: Engrave widget part
filter: Filter widget part
filter-groups: Filter groups widget part
image: Image widget part
message: Message widget part
multichoice: Multichoice widget part
multichoice-item: Item element in multichoice widget
radio-numbers: Radio numbers widget part
radio-numbers-option: Option element in radio numbers widget
radio-plain: Radio plain widget part
radio-plain-option: Option element in radio plain widget
radio-scale: Radio scale widget part
radio-scale-option: Option element in radio scale widget
select-listbox: Select listbox widget part
select-radio: Select radio widget part
thumbnail-label: Label for thumbnails
thumbnails: Thumbnails widget part
thumbnails-groups: Thumbnail groups widget part

Dependencies: mmq-form-control-label, mmq-formatted-message, mmq-switch, mmq-components-mapper

mmq-length-counter

Description: Character counter component for text inputs.

Dependencies: None

mmq-loader

Description: A versatile loading indicator with multiple animation variants.

CSS Variables:

--mmq-bg-color: Controls the background color for the bar loader. Defaults to var(--mmq-accent-light).
--mmq-loader-color: Controls the color of the loader. Defaults to currentColor.
--mmq-loader-size: Controls the size of the loader. Varies by variant.
--mmq-moon-loader-width: Controls the border width of the moon loader. Defaults to 4px.

Dependencies: None

mmq-logo-library

Description: Component for managing logos and brand images.

Parts:

file-input: File input for uploading logos

Dependencies: mmq-loader, mmq-formatted-message, mmq-icon, mmq-img, mmq-portal, mmq-modal-delete-confirmation

Description: Displays formatted messages with customizable styling.

Parts:

content: The message content container

Dependencies: None

mmq-mobile-group-item

Description: Mobile group item component for collapsible option groups.

CSS Variables:

--animation-duration: Duration for expand/collapse animations (default: 250ms)
--mmq-filter-widget__button-positioner-top: Top position for filter widget button positioner
--mmq-filter-widget__button-wrapper-top: Top position for filter widget button wrapper
--mmq-header-item-top-distance: Top distance for header item positioning
--mmq-mobile-group-item-border-sibling: Border styling for sibling items when a group is expanded
--mmq-mobile-group-item-shadow: Shadow styling for expanded group items

Parts:

block-header: Header for blocks
color: Color widget part
components-mapper: Container for the components mapper
content: Content container element
content-expanded: Content container when expanded
engrave: Engrave widget part
filter: Filter widget part
filter-groups: Filter groups widget part
header: Header element of the group item
header-expanded: Header element when expanded
image: Image widget part
item-button: Button element for the group item
message: Message widget part
multichoice: Multichoice widget part
multichoice-item: Item element in multichoice widget
radio-numbers: Radio numbers widget part
radio-numbers-option: Option element in radio numbers widget
radio-plain: Radio plain widget part
radio-plain-option: Option element in radio plain widget
radio-scale: Radio scale widget part
radio-scale-option: Option element in radio scale widget
select-listbox: Select listbox widget part
select-radio: Select radio widget part
side-panel-group: Container for the side panel group
side-panel-group-content: Content element for the side panel group
side-panel-group-header: Header element for the side panel group
side-panel-group-item-button: Button element for the side panel group item
side-panel-group-item-button-expanded: Button element when expanded
thumbnail-label: Label for thumbnails
thumbnails: Thumbnails widget part
thumbnails-groups: Thumbnail groups widget part

Dependencies: mmq-item-button, mmq-item-groups

Description: Header component for mobile views.

Parts:

ar-button: The AR button
back-button: The back/exit button
dot-menu: The additional options menu for mobile view
header-left: Container for elements on the left side of the header
header-right: Container for elements on the right side of the header
quick-icons: The quick access icons

Dependencies: mmq-quick-icon-button, mmq-icon, mmq-button, mmq-loader, mmq-formatted-message, mmq-quick-icons, mmq-dot-menu

mmq-mobile-search

Description: Search component optimized for mobile devices.

Parts:

button: The search button displayed when search is collapsed
clear-icon: The close icon displayed in the end adornment
container: Container that wraps the search input when open
end-adornment: Container for the close icon at the end of the input
search-icon: The search icon displayed in both input and button states
start-adornment: Container for the search icon at the start of the input
textfield: The text field component used for search input

Dependencies: mmq-text-field, mmq-input-adornment, mmq-icon

mmq-mobile-tabs

Description: Component for displaying and managing tabs and their content on mobile devices. Handles tab selection, summary view, and related controls.

CSS Variables:

--mmq-dialog-header-background: Background color for the header in dialog mode. Default is white.
--mmq-mobile-tabs-content-margin-bottom: Bottom margin for content sections in mobile tabs.
--mmq-mobile-tabs-min-height: Minimum height for the mobile tabs section. Default is 115px.
--mmq-text-align: Text alignment for tab list items. Default is left.

Parts:

block-header: Header for a configuration block.
components-mapper: Wrapper for component mapping functionality.
content-wrapper: Container for tab content.
engrave: Container for engraving options.
filter: Container for filter options.
filter-groups: Container for grouped filter options.
finish-btn: Finish button in the mobile footer.
footer: Footer containing actions like "Finish".
group-content: Content area of a group item.
group-header: Header element for a group item.
group-item: Individual option group item.
group-item-button: Button element within a group item.
group-item-button-expanded: Button element when group is expanded.
groups: Container for all option groups.
image: Container for image options.
list: List element containing tab buttons.
list-wrapper: Container element that wraps the tab list.
message: Container for message display.
multichoice: Container for multichoice options.
multichoice-item: Individual multichoice option.
no-items: Element displayed when no configurable items are available.
qty-box: Container for quantity inputs.
radio-numbers: Container for number radio options.
radio-numbers-option: Individual number radio option.
radio-plain: Container for plain radio options.
radio-plain-option: Individual plain radio option.
radio-scale: Container for scale radio options.
radio-scale-option: Individual scale radio option.
select-listbox: Container for listbox select options.
select-radio: Container for radio select options.
summary-box-price: Price element in the summary box.
summary-header: Header shown in summary view.
summary-header-back: Back button in the summary header.
summary-panel: Panel displaying the summary content.
tab: Individual tab button element.
tab-active: The currently active tab button.
tab-configurator: Configurator tab content.
tab-downloads: Downloads tab content.
tab-elements: Elements tab content.
tab-finishes: Finishes tab content.
tab-gallery: Gallery tab content.
tab-panel: Panel containing the content for a tab.
tab-popular: Popular items tab content.
tab-related: Related items tab content.
tab-summary: Summary tab content.
tab-text: Text tab content.
thumbnails: Container for thumbnail options.
thumbnails-groups: Container for grouped thumbnail options.

Dependencies: mmq-dialog-header, mmq-button, mmq-icon, mmq-formatted-message, mmq-summary-panel, mmq-side-panel-footer

Description: Confirmation modal for delete operations.

CSS Variables:

--mmq-background-white: Controls the background color of the dialog
--mmq-box-shadow-primary: Controls the primary box shadow color
--mmq-box-shadow-secondary: Controls the secondary box shadow color
--mmq-button-outline-color: Controls the outline color of buttons
--mmq-button-padding-small: Controls the padding of small buttons
--mmq-dialog-bottom: Controls the bottom position of the dialog
--mmq-dialog-content-padding: Controls the padding of the content area
--mmq-dialog-footer-padding: Controls the padding of the footer area
--mmq-dialog-height: Controls the height of the dialog
--mmq-dialog-left: Controls the left position of the dialog
--mmq-dialog-margin: Controls the margin around the dialog
--mmq-dialog-max-height: Controls the maximum height of the dialog
--mmq-dialog-max-width: Controls the maximum width of the dialog
--mmq-dialog-mobile-margin: Controls the margin on mobile devices
--mmq-dialog-overflow: Controls the overflow behavior of the dialog
--mmq-dialog-padding: Controls the padding inside the dialog
--mmq-dialog-position: Controls the position property of the dialog (default: relative)
--mmq-dialog-right: Controls the right position of the dialog
--mmq-dialog-top: Controls the top position of the dialog
--mmq-dialog-width: Controls the width of the dialog (desktop only)
--mmq-dialog-width: Controls the width of the dialog
--mmq-dialog-z-index: Controls the z-index stacking order of the dialog

Dependencies: mmq-dialog-header, mmq-formatted-message, mmq-dialog-content, mmq-dialog-footer, mmq-button

Description: Modal display for filter options.

Parts:

filter-widget: The filter widget component

Dependencies: mmq-side-panel-header, mmq-filter-widget

Description: Modal for managing filter settings.

CSS Variables:

--checkbox-internal-margin: Controls the internal margin of checkboxes
--checkbox-margin: Controls the margin around checkboxes
--mmq-checkbox-size: Controls the size of checkboxes
--mmq-dialog-content-height: Controls the height of the dialog content
--mmq-dialog-content-padding: Controls the padding of the dialog content

Dependencies: mmq-dialog-header, mmq-formatted-message, mmq-dialog-content, mmq-button, mmq-form-control-label, mmq-checkbox

Description: Portal component for rendering filter modals.

CSS Variables:

--mmq-modal-filters-content-height: Controls the height of the content area
--mmq-modal-filters-max-height: Controls the maximum height of the filters modal
--mmq-modal-filters-padding-right: Controls the right padding of the filters content
--mmq-modal-filters-portal-height: Controls the height of the portal
--mmq-modal-filters-portal-left: Controls the left position of the portal
--mmq-modal-filters-portal-position: Controls the position property of the portal
--mmq-modal-filters-portal-top: Controls the top position of the portal
--mmq-modal-filters-portal-width: Controls the width of the portal
--mmq-modal-filters-portal-z-index: Controls the z-index of the portal

Parts:

content: The container for the modal filters content

Dependencies: mmq-modal-filters

mmq-modular-actions

Description: Component for handling modular UI actions.

Dependencies: None

mmq-modular-element-list

Description: Component for displaying and managing modular element lists.

CSS Variables:

--mmq-modular-elements-dialog-left: Controls the left position of the modular elements dialog
--mmq-modular-elements-dialog-top: Controls the top position of the modular elements dialog
--mmq-modular-elements-dialog-width: Sets the width of the modular elements dialog

Parts:

element-list-search: The search input element for filtering the element list
nativeInput: The native input element within the search
notch: The notch component of the search input
outline: The outline around the search input
sort-list-button: The button for sorting the element list
textarea: The text input field within the search element

Dependencies: mmq-button, mmq-icon, mmq-formatted-message, mmq-element-list-modal

mmq-modular-header

Description: Header component for modular UI interfaces.

CSS Variables:

--header-button-height: Controls the height of header buttons
--header-button-width: Controls the width of header buttons
--quick-icon-button-bg: Controls the background color of quick icon buttons
--quick-icon-button-bg-active: Controls the background color of active quick icon buttons
--quick-icon-button-bg-hover: Controls the background color of hovered quick icon buttons
--quick-icon-button-color-hover: Controls the text color of hovered quick icon buttons

Parts:

back-button: The back/exit button shown when withBackButton or exitButton is true
button: The button that toggles the more options menu
dot-menu: The dropdown menu for additional options
dot-menu-container: The container for the more options menu
dot-menu-header: The header of the more options dropdown menu
dot-menu-items: The container for menu items in the more options dropdown
finish-btn: The finish button in the summary box
icon: The icon within the more options toggle button
left-section: The left section of the header containing back button and AR button
modular-ar-button: The AR view button
price-settings-button: The button for price settings
quick-icons: The container for quick action icons
right-section: The right section of the header containing price and summary box
summary-box: The summary box showing price and finish button
summary-box-price: The price display in the summary box
summary-box-price-wrapper: The wrapper around the price

Dependencies: mmq-quick-icon-button, mmq-icon, mmq-button, mmq-formatted-message, mmq-quick-icons, mmq-tooltip, mmq-sync-options-tooltip, mmq-price-settings-button, mmq-summary-box

mmq-modular-option-panel

Description: Panel component for displaying configuration options in modular UI.

CSS Variables:

--mmq-canvas-buttons-height: Height of the canvas buttons used for positioning calculations
--mmq-side-panel-bottom: Controls the distance from the bottom of the viewport
--mmq-side-panel-right: Controls the distance from the right for the sliding animation
--mmq-toolbar-height: Height of the toolbar used for positioning calculations

Parts:

block-header: The block header component
components-mapper: The component mapper element
engrave: The engrave component
filter: The filter component
filter-groups: Groups within filters
image: The image component
message: The message component
multichoice: The multichoice selection component
multichoice-item: Individual item in multichoice
qty-box: The quantity box component
qty-button-down: The decrease quantity button
qty-button-up: The increase quantity button
radio-numbers: The radio number selection component
radio-numbers-option: Individual option in radio numbers
radio-plain: The plain radio selection component
radio-plain-option: Individual option in plain radio
radio-scale: The radio scale selection component
radio-scale-option: Individual option in radio scale
select-listbox: The select listbox component
select-radio: The select radio component
side-panel: The side panel container
side-panel-container: The main container of the side panel
side-panel-content: The content area of the side panel
side-panel-footer: The footer of the side panel
side-panel-group: The option group container
side-panel-group-content: The content of an option group
side-panel-group-header: The header of an option group
side-panel-group-item-button: The button for an option item
side-panel-group-item-button-expanded: The expanded state of an option item button
side-panel-header: The header of the side panel
summary-box-price: The price display in the summary box
summary-box-price-wrapper: The wrapper for the price in summary box
thumbnail-label: The label for thumbnails
thumbnails: The thumbnails selection component
thumbnails-groups: Groups within thumbnails

Dependencies: mmq-side-panel

Description: Toolbar component for modular UI interfaces.

CSS Variables:

--mmq-button-gap: Controls the gap between buttons in the toolbar
--mmq-button-padding-small: Controls the padding of small buttons in the toolbar
--mmq-modular-toolbar-left: Controls the horizontal position of the toolbar
--mmq-modular-toolbar-top: Controls the vertical position of the toolbar

Parts:

arrow-left: Left navigation arrow
arrow-left-icon: Icon for the left arrow
arrow-right: Right navigation arrow
arrow-right-icon: Icon for the right arrow
item: Individual toolbar item
scrollbar: Scrollable container for toolbar items

Dependencies: mmq-icon, mmq-formatted-message, mmq-tooltip, mmq-elements-debugger

Description: Component for positioning the modular toolbar.

CSS Variables:

--mmq-mobile-toast-left: Controls the horizontal position of toasts on mobile
--mmq-mobile-toast-top: Controls the vertical position of toasts on mobile
--mmq-mobile-toast-transform: Controls the transform applied to the toast on mobile
--mmq-mobile-toast-width: Controls the width of the toast on mobile
--mmq-toast-left: Controls the horizontal position of toasts
--mmq-toast-left: Controls the left position of toast containers
--mmq-toast-top: Controls the vertical position of toasts
--mmq-toast-transform: Controls the transform applied to the toast
--mmq-toast-transform: Controls the transform of toast containers
--mmq-toast-width: Controls the width of the toast
--mmq-toast-width: Controls the width of toast containers

Parts:

drag: The drag handle for the toolbar

Dependencies: mmq-modular-toolbar, mmq-icon, mmq-toast-container

mmq-modular-ui

Description: Root component for modular UI interfaces.

CSS Variables:

--base-height: Controls the base height of the component (varies between mobile and desktop)
--mmq-canvas-buttons-height: Height of the canvas buttons for spacing calculations
--mmq-configurator-container-height: Height of the configurator container
--mmq-configurator-wrapper-mobile-modular-base-height: Base height for the wrapper on mobile
--mmq-configurator-wrapper-modular-vertical-padding: Vertical padding for the modular wrapper
--mmq-mobile-toast-bottom: Controls the bottom position of mobile toasts
--mmq-mobile-toast-left: Controls the left position of mobile toasts
--mmq-mobile-toast-right: Controls the right position of mobile toasts
--mmq-mobile-toast-top: Controls the top position of mobile toasts
--mmq-mobile-toast-transform: Controls the transform of mobile toasts
--mmq-mobile-toast-width: Controls the width of mobile toasts
--mmq-modular-canvas-height: Height of the canvas in modular mode (mobile only)
--mmq-modular-elements-dialog-top: Controls the top position of the modular elements dialog
--mmq-modular-ui-extra-space: Extra space to adjust the height
--mmq-side-panel-top: Controls the top position of the side panel
--mmq-toast-bottom: Controls the bottom position of toasts
--mmq-toast-left: Controls the left position of toasts
--mmq-toast-right: Controls the right position of toasts
--mmq-toast-top: Controls the top position of toasts
--mmq-toast-transform: Controls the transform of toasts
--mmq-toast-width: Controls the width of toasts
--mmq-toast-z-index: Controls the z-index of toasts
--mmq-toolbar-height: Height of the toolbar for spacing calculations
--mmq-viewport-height: The viewport height (default: 100vh)

Parts:

canvas-buttons: The buttons displayed on the 3D canvas
element-list: The list of available elements to add
header: The header component for desktop view
mobile-header: The header shown on mobile devices
notifications-container: Container for notifications
notifications-container-mobile: Container for mobile notifications
option-panel: The panel showing configuration options
price: The price component
price-container: Container for the price display
quote-preview-ui: Quote preview component
toast-container: Container for toast notifications
toolbar-positioner: Component that positions the toolbar
wrapper: The main wrapper for the modular UI

Dependencies: mmq-mobile-header, mmq-modular-header, mmq-quote-preview-ui, mmq-modular-element-list, mmq-modular-option-panel, mmq-price-value, mmq-canvas-buttons, mmq-toast-container, mmq-modular-toolbar-positioner, mmq-see-changes-overlay, mmq-portal, mmq-webgl-unsupported-modal, mmq-modular-actions

mmq-multichoice-item

Description: Individual selectable item in a multichoice component.

Parts:

checkbox: The checkbox input element
label: The label for the multichoice item

Dependencies: mmq-tooltip, mmq-form-control-label, mmq-checkbox

mmq-new-image-panel-header

Description: Header component for the image panel with action buttons.

Parts:

btn: General button elements in the header.
exit-btn: Button to exit the current view.
panel-left: Container for elements on the left side of the panel.
panel-right: Container for elements on the right side of the panel.
quick-icons: Container for quick access icons.
reset-btn: Button to reset configurations.

Dependencies: mmq-quick-icon-button, mmq-icon, mmq-quick-icons

mmq-new-quantity-box

Description: New style quantity box component for adjusting product quantity.

CSS Variables:

--mmq-background-white: Background color for the quantity box
--mmq-border-light: Border color for the buttons divider
--mmq-grey-100: Border color for the quantity box
--mmq-grey-600: Icon color for the quantity buttons
--mmq-typography-primary: Text color for the quantity input

Parts:

decrease-icon: Icon for the decrease button
increase-icon: Icon for the increase button

Dependencies: mmq-icon

mmq-number-input

Description: Input component for numeric values with increment/decrement buttons.

Parts:

buttons: Container for the increment and decrement buttons
decrease-button: Button to decrement the value
decrease-icon: Icon for the decrement button
increase-button: Button to increment the value
increase-icon: Icon for the increment button
input: The native input element

Dependencies: mmq-loader, mmq-icon

mmq-order-sent

Description: Confirmation display after an order has been successfully submitted.

Parts:

description: The details about the order submission
explore-button: Button to browse more products
header: The header text confirming the order was sent
icon: The success icon
view-button: Button to view the submitted order

Dependencies: mmq-icon, mmq-formatted-message, mmq-button

mmq-pdf-loader

Description: Loading component for PDF generation.

Dependencies: mmq-icon

Description: A dropdown menu component for displaying options.

CSS Variables:

--mmq-popover-menu-width: Controls the width of the popover menu. Defaults to 190px.

Parts:

header: The header element of the menu.
list: The list container for menu items.

Dependencies: None

Description: Individual item in a popover menu.

Dependencies: mmq-icon

mmq-portal

Description: A portal component that teleports its content to a different part of the DOM.

Parts:

backdrop: The backdrop element shown when foreground is true.

Dependencies: mmq-backdrop

mmq-price-settings-button

Description: Button component for accessing price settings options.

Parts:

header-button: The button element
icon: The settings icon
icon-box: Container for the icon
panel: The settings panel that appears on click

Dependencies: mmq-tooltip, mmq-header-button, mmq-icon, mmq-price-settings-panel

Description: Modal button for price settings configuration.

Parts:

apply-button: The apply button in the footer
button: The quick icon button
button-icon: Button icon
dialog: The dialog element
dialog-content: The content of the dialog
dialog-header: The header of the dialog
dropdown-icon: The icon within the dropdown
dropdown-item: The dropdown item element
footer: The footer of the dialog
portal: The portal element for the modal
price-settings-panel: The price settings panel in the modal

Dependencies: mmq-quick-icon-button, mmq-icon, mmq-dropdown-item, mmq-formatted-message, mmq-portal, mmq-dialog, mmq-dialog-header, mmq-dialog-content, mmq-price-settings-panel, mmq-dialog-footer, mmq-button

mmq-price-settings-panel

Description: Panel for configuring price settings.

Parts:

dealer: The dealer selection dropdown
price-type: The price type selection dropdown
separator: The line separator between sections
title: The title element for each section

Dependencies: mmq-formatted-message, mmq-select, mmq-loader

mmq-price-value

Description: Component for displaying formatted price values.

CSS Variables:

--mmq-price-value-font-size: Font size of the price value (default: 14px)
--mmq-price-value-font-weight: Font weight of the price value (default: 500)

Parts:

price-value-field: The formatted price element

Dependencies: mmq-formatted-price, mmq-tooltip

mmq-print-on-demand

Description: Displays and manages custom image printing options.

Parts:

container: Main container for the print-on-demand component
empty-icon: Icon displayed when no image is selected
flex: Flex container for layout
img: The image element
img-wrapper: Container for the image preview
option-data: Container for option information

Dependencies: mmq-print-on-demand-editor, mmq-img, mmq-icon, mmq-formatted-message, mmq-tooltip

mmq-print-on-demand-editor

Description: Advanced editor for customizing print-on-demand images.

Parts:

dialog: Dialog container for the editor
portal: Portal element for the full-screen editor

Dependencies: mmq-portal, mmq-dialog, mmq-print-on-demand-editor-content

mmq-print-on-demand-editor-content

Description: Content area for the print-on-demand editor.

Parts:

dialog-content: Content area of the editor
dialog-header: Header of the editor dialog

Dependencies: mmq-dialog-header, mmq-formatted-message, mmq-icon, mmq-dialog-content, mmq-print-on-demand-preview-canvas, mmq-button, mmq-logo-library, mmq-print-on-demand-layers, mmq-side-panel-header

mmq-print-on-demand-layers

Description: Manages layers of images in the print-on-demand editor.

Parts:

item: Individual layer item
item-btn-clone: Button to duplicate layer
item-btn-delete: Button to delete layer
item-btn-visibility: Button to toggle layer visibility
item-headers: Container for layer item headers
item-hover-image: Enlarged image shown on hover
item-icon: Icon for the layer item
item-image: Image preview for the layer
item-name: Name of the layer item
item-quality-info: Information about image quality
no-items: Empty state when no layers exist
number-of-logos: Display showing the number of logos/images allowed

Dependencies: mmq-icon, mmq-formatted-message, mmq-tooltip, mmq-img, mmq-button

mmq-print-on-demand-preview-canvas

Description: Canvas component for previewing print-on-demand designs.

CSS Variables:

--max-height: Calculated maximum height based on available space
--mmq-pod-preview-height: Height of the preview canvas
--mmq-pod-preview-width: Width of the preview canvas

Parts:

canvas: The canvas element

Dependencies: mmq-icon, mmq-formatted-message

Description: Modal for replacing a product in the configuration.

CSS Variables:

--mmq-background-white: Controls the background color of the dialog
--mmq-box-shadow-primary: Controls the primary box shadow color
--mmq-box-shadow-secondary: Controls the secondary box shadow color
--mmq-dialog-bottom: Controls the bottom position of the dialog
--mmq-dialog-content-padding: Controls the padding of the content area
--mmq-dialog-footer-padding: Controls the padding of the footer area
--mmq-dialog-height: Controls the height of the dialog
--mmq-dialog-left: Controls the left position of the dialog
--mmq-dialog-margin: Controls the margin around the dialog
--mmq-dialog-max-height: Controls the maximum height of the dialog
--mmq-dialog-max-width: Controls the maximum width of the dialog
--mmq-dialog-mobile-margin: Controls the margin on mobile devices
--mmq-dialog-overflow: Controls the overflow behavior of the dialog
--mmq-dialog-padding: Controls the padding inside the dialog
--mmq-dialog-position: Controls the position property of the dialog (default: relative)
--mmq-dialog-right: Controls the right position of the dialog
--mmq-dialog-top: Controls the top position of the dialog
--mmq-dialog-width: Controls the width of the dialog (desktop only)
--mmq-dialog-width: Controls the width of the dialog
--mmq-dialog-z-index: Controls the z-index stacking order of the dialog

Parts:

button: The action buttons in the footer
content: The content section of the modal
footer: The footer section containing action buttons
header: The header text of the modal
icon: The icon displayed in the modal

Dependencies: mmq-dialog-content, mmq-icon, mmq-formatted-message, mmq-dialog-footer, mmq-button

mmq-product-tile

Description: Tile component for displaying product information in a grid layout.

CSS Variables:

--product-tile-border: Border color of the product tile (default: var(--mmq-border-light))
--product-tile-border-radius: Border radius of the product tile (default: 3px on mobile, 5px on desktop)

Parts:

container: The main container for the tile content
description: The product description element
hover-image: The image shown on hover
image: The main product image
images: The container for the product images
images-button: The button wrapping the images
label: The product name element
labels: The container for text labels
link: The clickable container element
placeholder: The placeholder element shown when no image is available

Dependencies: mmq-img, mmq-portal, mmq-product-replacement-modal

mmq-qr-code

Description: A QR code generator component with customizable styling.

Dependencies: None

mmq-quantity-box

Description: Quantity box component for adjusting product quantity.

CSS Variables:

--mmq-background-white: Background color for the quantity box
--mmq-border-light: Border color for the quantity box

Parts:

qty-button-down: Button for decreasing quantity
qty-button-up: Button for increasing quantity

Dependencies: mmq-icon

mmq-quick-icon-button

Description: Button component used for compact action buttons on canvas and in toolbars.

CSS Variables:

--mmq-quick-icon-background: Controls the background color of the quick icon, it takes color value in rgba format, by default it is 46, 51, 65, 0.05
--mmq-quick-icon-button-border-radius: Border radius of the quick icon button (default: 4px)
--mmq-quick-icon-button-disabled-opacity: Opacity of the button when disabled (default: 0.3)
--mmq-quick-icon-button-font-size: Font size of the icon inside the button (default: 16px)
--mmq-quick-icon-button-height: Height of the quick icon button (default: 40px)
--mmq-quick-icon-button-icon-color: Color of the icon inside the button (default: var(--mmq-grey-600))
--mmq-quick-icon-button-width: Width of the quick icon button (default: 40px)
--quick-icon-button-bg: Background color of the quick icon button (default: rgba(46, 51, 65, 0.05))
--quick-icon-button-bg-hover: Background color of the quick icon button on hover (default: var(--mmq-grey-200))
--quick-icon-button-color-hover: Color of the icon on hover (default: var(--mmq-grey-800))

Parts:

button: The button element within the quick icon button

Dependencies: mmq-button, mmq-tooltip

mmq-quick-icons

Description: Container for quick access icons.

Parts:

button: Quick action button
dropdown-item: Dropdown menu item
price-selector: Price selector component
price-selector-dropdown: Dropdown for price selection
save-favs: Save to favorites button
save-favs-dropdown: Dropdown for save favorites options

Dependencies: mmq-quick-icon-button, mmq-icon, mmq-save-pdf-button, mmq-price-settings-modal-button, mmq-save-button, mmq-save-favs-modal-button, mmq-save-scene-button, mmq-loader, mmq-dropdown-item, mmq-formatted-message, mmq-checkbox

mmq-radio

Description: Radio button component for single selection from multiple options.

CSS Variables:

--radio-active-color: Color for the checked state
--radio-color: Color for the unchecked state
--radio-margin: Margin around the radio button

Parts:

checked-icon: Icon displayed when radio is checked
switch: The switch base component
unchecked-icon: Icon displayed when radio is unchecked

Dependencies: mmq-switch-base, mmq-icon

mmq-radio-number-option

Description: Individual numeric option within a radio number group.

Parts:

label: The text label for the option
label-wrapper: Wrapper for the option label
radio: The radio input element

Dependencies: mmq-tooltip

mmq-radio-numbers

Description: Grid display of numeric options as radio buttons.

Parts:

number-option: Individual numeric option

Dependencies: mmq-radio-number-option

mmq-radio-option

Description: Individual option within a radio button group.

Parts:

label: The text label for the option
label-wrapper: Wrapper for the option label
radio: The radio input element

Dependencies: mmq-tooltip

mmq-radio-plain

Description: Simple radio button group for option selection.

Parts:

radio-option: Individual radio option

Dependencies: mmq-radio-option

mmq-radio-scale

Description: Displays a horizontal scale of selectable radio options.

Parts:

scale-option: Individual option in the scale

Dependencies: mmq-radio-scale-option

mmq-radio-scale-option

Description: Individual option within a radio scale.

Parts:

dot: The visual dot indicator for the option
input: The radio input element
label: The option label
text: The text content of the option

Dependencies: mmq-tooltip

Description: Displays related products or recommendations below the configurator.

CSS Variables:

--mmq-loader-color: Color of the loader animation. Default is the accent color.
--mmq-related-margin-bottom: Bottom margin for related products section. Default is 50px.
--mmq-related-no-tabs-padding-top: Top padding for related section when no tabs are present. Default is 57px.

Dependencies: mmq-formatted-message, mmq-loader, mmq-product-tile

mmq-required-label

Description: Label component indicating required fields.

CSS Variables:

--mmq-required-label--right: Right position of the required label (default: 1px)
--mmq-required-label-top: Top position of the required label (default: 1px)

Dependencies: None

mmq-saturation

Description: Component for saturation selection in color pickers.

CSS Variables:

--mmq-saturation-background: Controls the background color of the saturation picker. Set based on the hue value.

Dependencies: None

mmq-save-button

Description: Button component for saving configurations.

CSS Variables:

--mmq-button-color: Color for the button icon in default state
--mmq-quick-icon-background: Background color for the new style button (RGBA format)

Dependencies: mmq-tooltip, mmq-button, mmq-icon, mmq-save-config-form

mmq-save-config-form

Description: Form component for saving configuration settings.

Dependencies: mmq-save-config-form-modal, mmq-save-config-form-tooltip

Description: Modal version of the save configuration form.

CSS Variables:

--mmq-dialog-content-height: Height of the dialog content (default: auto)
--mmq-dialog-content-overflow: Overflow behavior for dialog content (default: visible)
--mmq-dialog-content-padding: Padding for the dialog content (default: 24px 16px 0)
--mmq-dialog-footer-padding: Padding for the dialog footer (default: 32px 16px)
--mmq-dialog-footer-padding-top: Top padding for the dialog footer in modular mode
--mmq-dialog-header-height: Height of the dialog header (default: 44px)
--mmq-dialog-header-padding: Padding for the dialog header (default: 12px 16px)

Dependencies: mmq-dialog-header, mmq-button, mmq-icon, mmq-formatted-message, mmq-dialog-content, mmq-form-field-set, mmq-text-field, mmq-select, mmq-input-adornment, mmq-form-helper-text, mmq-form-control-label, mmq-checkbox, mmq-dialog-footer

Description: Tooltip version of the save configuration form.

CSS Variables:

--mmq-dialog-content-height: Height of the dialog content (default: auto)
--mmq-dialog-content-overflow: Overflow behavior for dialog content (default: visible)
--mmq-dialog-content-padding: Padding for the dialog content (default: 0)
--mmq-dialog-footer-padding: Padding for the dialog footer (default: 16px 24px 32px)
--mmq-dialog-header-height: Height of the dialog header (default: 44px)
--mmq-dialog-header-padding: Padding for the dialog header (default: 10px 24px)

Description: Modal button for saving to favorites.

Parts:

button: The quick icon button for saving to favorites
button-icon: The icon within the button
dialog: The dialog element
dropdown-item: The dropdown item element when displayed as menu item
dropdown-item-icon: The icon within the dropdown item
portal: The portal element for the modal
save-config-form: The save configuration form

Dependencies: mmq-quick-icon-button, mmq-icon, mmq-dropdown-item, mmq-formatted-message, mmq-portal, mmq-dialog, mmq-save-config-form

mmq-save-pdf-button

Description: Button component for PDF generation.

Parts:

button: The quick icon button for PDF generation
dropdown-item: The dropdown item element when displayed as menu item

Dependencies: mmq-quick-icon-button, mmq-icon, mmq-dropdown-item, mmq-formatted-message

mmq-save-scene-button

Description: Button component for saving the scene state.

Parts:

button: The quick icon button for saving the scene
button-icon: The icon within the button
dialog: The dialog element
dropdown-item: The dropdown item element
dropdown-item-label: The label of the dropdown item
portal: The portal element for the modal
save-config-form: The save configuration form

Dependencies: mmq-quick-icon-button, mmq-icon, mmq-formatted-message, mmq-dropdown-item, mmq-loader, mmq-portal, mmq-dialog, mmq-save-config-form

Description: Modal displayed when there's an error with the scene.

CSS Variables:

--mmq-background-white: Controls the background color of the dialog
--mmq-box-shadow-primary: Controls the primary box shadow color
--mmq-box-shadow-secondary: Controls the secondary box shadow color
--mmq-dialog-bottom: Controls the bottom position of the dialog
--mmq-dialog-content-padding: Controls the padding of the content area
--mmq-dialog-footer-padding: Controls the padding of the footer area
--mmq-dialog-height: Controls the height of the dialog
--mmq-dialog-left: Controls the left position of the dialog
--mmq-dialog-margin: Controls the margin around the dialog
--mmq-dialog-max-height: Controls the maximum height of the dialog
--mmq-dialog-max-width: Controls the maximum width of the dialog
--mmq-dialog-mobile-margin: Controls the margin on mobile devices
--mmq-dialog-overflow: Controls the overflow behavior of the dialog
--mmq-dialog-padding: Controls the padding inside the dialog
--mmq-dialog-position: Controls the position property of the dialog (default: relative)
--mmq-dialog-right: Controls the right position of the dialog
--mmq-dialog-top: Controls the top position of the dialog
--mmq-dialog-width: Controls the width of the dialog (desktop only)
--mmq-dialog-width: Controls the width of the dialog
--mmq-dialog-z-index: Controls the z-index stacking order of the dialog

Parts:

button: The action buttons in the footer
content: The content section of the modal
footer: The footer section containing action buttons
header: The header text of the modal
icon: The error icon displayed in the modal

Dependencies: mmq-dialog-content, mmq-icon, mmq-formatted-message, mmq-dialog-footer, mmq-button

mmq-see-changes-overlay

Description: Overlay component indicating content changes are being processed.

CSS Variables:

--mmq-accent-main: Controls the accent color used for text and icons
--mmq-loader-color: Controls the color of the loader
--mmq-loader-size: Controls the size of the loader

Dependencies: mmq-loader, mmq-icon, mmq-formatted-message

mmq-select

Description: Select dropdown component for choosing from a list of options.

Parts:

control: The form control wrapper
error-adornment: Error icon container
error-info-icon: Error icon
error-msg: Error message container
helper-text: Helper text container
label: The label element
required: The required indicator element
select: The base select component

Dependencies: mmq-form-control, mmq-input-label, mmq-required-label, mmq-formatted-message, mmq-base-select, mmq-input-adornment, mmq-icon, mmq-form-helper-text

Description: Dropdown selection widget for choosing from a list of options.

Parts:

select: The select dropdown element

Dependencies: mmq-select

Description: Component for sharing functionality.

Dependencies: mmq-tooltip, mmq-share-item, mmq-icon, mmq-formatted-message

Description: Share item component for share functionality.

Dependencies: None

Description: Modal for sharing options and functionality.

Dependencies: mmq-share-item, mmq-icon, mmq-formatted-message

mmq-side-panel

Description: Side panel component for displaying configuration options.

CSS Variables:

--mmq-side-panel-bottom: Bottom position of the modular side panel (default: 24px)
--mmq-side-panel-right: Right position of the modular side panel (default: 24px)
--mmq-side-panel-top: Top position of the modular side panel (default: 24px)
--mmq-side-panel-width: Width of the modular side panel (default: 376px)
--mmq-viewport-height: Custom viewport height value (default: 100vh)

Parts:

block-header: Header for blocks
components-mapper: Container for components mapper
container: Main container for the side panel
engrave: Engrave widget part
filter: Filter widget part
filter-groups: Filter groups widget part
finish-btn: Finish button element
footer: Footer element of the side panel
header: Header element of the side panel
image: Image widget part
message: Message widget part
multichoice: Multichoice widget part
multichoice-item: Item element in multichoice widget
qty-box: Quantity box element
qty-button-down: Button for decreasing quantity
qty-button-up: Button for increasing quantity
radio-numbers: Radio numbers widget part
radio-numbers-option: Option element in radio numbers widget
radio-plain: Radio plain widget part
radio-plain-option: Option element in radio plain widget
radio-scale: Radio scale widget part
radio-scale-option: Option element in radio scale widget
select-listbox: Select listbox widget part
select-radio: Select radio widget part
side-panel-content: Content container element
side-panel-group: Container for each group in the side panel
side-panel-group-content: Content element for each group
side-panel-group-header: Header element for each group
side-panel-group-item-button: Button element for each group item
side-panel-group-item-button-expanded: Button element when expanded
summary-box-price: Element for displaying the price
summary-box-price-wrapper: Wrapper for the summary box price
thumbnail-label: Label for thumbnails
thumbnails: Thumbnails widget part
thumbnails-groups: Thumbnail groups widget part

Dependencies: mmq-formatted-message, mmq-side-panel-header, mmq-side-panel-content, mmq-side-panel-footer

mmq-side-panel-content

Description: Side panel content component for displaying configuration options content.

CSS Variables:

--mmq-filter-widget-padding-no-button: Padding for filter widget when no button is present
--mmq-filter-widget__button-positioner-top: Top position for filter widget button positioner
--mmq-filter-widget__button-wrapper-top: Top position for filter widget button wrapper
--mmq-mobile-group-item-border-sibling: Border styling for sibling items when a group is expanded
--mmq-mobile-group-item-shadow: Shadow styling for expanded group items
--option-panel-padding: Overall padding for the option panel
--option-panel-padding-x: Horizontal padding for the option panel (default: 0)
--option-panel-padding-y: Vertical padding for the option panel (default: 0)

Parts:

block-header: Header for blocks
checkbox: Checkbox element
components-mapper: Container for components mapper
engrave: Engrave widget part
filter: Filter widget part
filter-groups: Filter groups widget part
image: Image widget part
label: Label element
link: Link element within formatted messages
message: Message widget part
multichoice: Multichoice widget part
multichoice-item: Item element in multichoice widget
qty-button-down: Button for decreasing quantity
qty-button-up: Button for increasing quantity
radio-numbers: Radio numbers widget part
radio-numbers-option: Option element in radio numbers widget
radio-plain: Radio plain widget part
radio-plain-option: Option element in radio plain widget
radio-scale: Radio scale widget part
radio-scale-option: Option element in radio scale widget
select-listbox: Select listbox widget part
select-radio: Select radio widget part
side-panel-content-wrapper: Wrapper for the content
side-panel-group: Container for each group
side-panel-group-content: Content element for each group
side-panel-group-header: Header element for each group
side-panel-group-item-button: Button element for each group item
side-panel-group-item-button-expanded: Button element when expanded
summary-box-price: Element for displaying the price
thumbnail-label: Label for thumbnails
thumbnails: Thumbnails widget part
thumbnails-groups: Thumbnail groups widget part

Dependencies: mmq-side-panel-content-wrapper, mmq-icon, mmq-formatted-message, mmq-form-control-label, mmq-checkbox, mmq-mobile-group-item, mmq-item-groups, mmq-components-mapper, mmq-summary-panel

mmq-side-panel-content-wrapper

Description: Wrapper component for side panel content.

CSS Variables:

--option-panel-padding: Overall padding for the option panel
--option-panel-padding-x: Horizontal padding for the option panel (default: 0)
--option-panel-padding-y: Vertical padding for the option panel (default: 0)

Dependencies: None

mmq-side-panel-footer

Description: Footer component for the side panel.

CSS Variables:

--mmq-button-contrast-color: Color for icon in wide buttons (default: #1762d4)
--mmq-button-height: Height for the action buttons (default: 40px)
--mmq-button-padding: Padding for the buttons (default: 10px)
--mmq-button-width: Width for the action buttons (default: 100%)
--mmq-side-panel-footer-position: Position value for the footer (default: initial)
--mmq-side-panel-footer-top: Top position value for the footer (default: unset)

Parts:

qty-box: Quantity box element

Dependencies: mmq-button, mmq-formatted-message, mmq-icon, mmq-toast-container, mmq-loader, mmq-backdrop, mmq-share-modal, mmq-new-quantity-box, mmq-quantity-box, mmq-summary-box

mmq-side-panel-header

Description: Header component for the side panel.

CSS Variables:

--mmq-side-panel-header-color: Text color for the side panel header (default: var(--mmq-typography-primary))
--mmq-side-panel-header-font-family: Font family for the side panel header
--mmq-side-panel-header-font-size: Font size for the side panel header (default: var(--mmq-font-size-base, 16px))
--mmq-side-panel-header-font-weight: Font weight for the side panel header (default: 400)
--mmq-side-panel-header-height: Height of the side panel header
--mmq-side-panel-header-min-height: Minimum height for the side panel header
--mmq-side-panel-header-padding: Padding for the side panel header

Dependencies: mmq-icon, mmq-price-settings-button

Description: Authentication component for user login.

Parts:

box: The container box for the sign-in form
description: The descriptive text below the title
error: The error message element
error-wrapper: Container for error messages
form: The form element containing input fields
form-field-set: Form fields container
submit: The submit/login button
title: The title/header of the sign-in form

Dependencies: mmq-loader, mmq-formatted-message, mmq-form-field-set, mmq-error-wrapper, mmq-button

mmq-slider

Description: Slider input component for selecting numeric values from a range.

Parts:

input: Input element that displays the current value
input-wrapper: Container for the numeric input display
slider: The native range input element

Dependencies: mmq-input

mmq-summary-box

Description: Summary box component for displaying price and finish button.

CSS Variables:

--mmq-button-height: Height of the button (default: auto)
--mmq-button-padding: Padding for the button (default: 0)
--mmq-button-width: Width of the button (default: auto)
--mmq-loader-color: Color for the loading indicator (default: var(--mmq-accent-main))
--mmq-loader-margin: Margin between loading dots (default: 2px)
--mmq-loader-size: Size of the loading dots (default: 6px)

Parts:

finish-btn: Finish button element
summary-box-price: Element for displaying the price
summary-box-price-wrapper: Wrapper for the price element

Dependencies: mmq-loader, mmq-formatted-price, mmq-tooltip, mmq-button, mmq-formatted-message

mmq-summary-panel

Description: Summary panel component for displaying product summary information.

CSS Variables:

--mmq-background-tag: Background color for discount tags (default: #edecee)

Parts:

summary-box-price: Element for displaying the price

Dependencies: mmq-formatted-message, mmq-formatted-price, mmq-quantity-box, mmq-button, mmq-toast-container, mmq-share-component, mmq-icon

mmq-switch

Description: Toggle switch component for binary on/off states.

CSS Variables:

--switch-active-color: Background color for the active track
--switch-color: Background color for the track
--switch-text-color: Color for the switch text
--switch-thumb-color: Color for the thumb element

Parts:

checked: Container for elements in the checked state
switch: The switch base component
thumb: The thumb element in off state
thumb-checked: The thumb element in on state
track: The track element that the thumb slides on

Dependencies: mmq-switch-base, mmq-formatted-message, mmq-tooltip

mmq-switch-base

Description: Base component for switches and checkboxes.

CSS Variables:

--switch-base-space: Spacing for edge placement (default: -12px, -3px for small size)

Parts:

input: The native input element

Dependencies: None

Description: Tooltip for option synchronization settings.

CSS Variables:

--checkbox-internal-margin: Controls the internal margin of the checkbox
--mimeeq-white-150: Controls the background color of the OK button (semi-transparent white)
--mmq-checkbox-size: Controls the size of the checkbox
--mmq-common-white: Controls the color of text and UI elements
--mmq-font-size-small: Controls the font size for text

Parts:

checkbox: Checkbox input element
label: Label for the checkbox option

Dependencies: mmq-formatted-message, mmq-form-control-label, mmq-checkbox, mmq-button

mmq-tab-configurator

Description: Component for displaying configurator content in a tab.

Parts:

block-header: Header for a configuration block.
components-mapper: Wrapper for component mapping functionality.
engrave: Container for engraving options.
filter: Container for filter options.
filter-groups: Container for grouped filter options.
group-content: Content area of a group item.
group-header: Header element for a group item.
group-item: Individual option group item.
group-item-button: Button element within a group item.
group-item-button-expanded: Button element when group is expanded.
groups: Container for all option groups.
image: Container for image options.
message: Container for message display.
multichoice: Container for multichoice options.
multichoice-item: Individual multichoice option.
no-items: Element displayed when no configurable items are available.
radio-numbers: Container for number radio options.
radio-numbers-option: Individual number radio option.
radio-plain: Container for plain radio options.
radio-plain-option: Individual plain radio option.
radio-scale: Container for scale radio options.
radio-scale-option: Individual scale radio option.
select-listbox: Container for listbox select options.
select-radio: Container for radio select options.
thumbnail-label: Label for thumbnail options.
thumbnails: Container for thumbnail options.
thumbnails-groups: Container for grouped thumbnail options.

Dependencies: mmq-tab-configurator-content

mmq-tab-configurator-content

Description: Content component for tab configurator.

Parts:

components-mapper: Components mapper container
group-item: Group item element
groups: Groups container
no-items: Empty state element

Dependencies: mmq-icon, mmq-formatted-message, mmq-mobile-group-item, mmq-components-mapper

mmq-tab-downloads

Description: Tab component for downloads section.

Dependencies: mmq-loader, mmq-formatted-message, mmq-button

mmq-tab-elements

Description: Component for displaying configurable product elements in a tab format. Used in modular products to manage and organize component elements.

CSS Variables:

--mmq-configurator-header-height: Height of the configurator header used in positioning calculations.
--mmq-configurator-height: Height of the configurator container used for layout calculations.
--mmq-loader-color: Color of the loading spinner. Default is var(--mmq-accent-main).
--product-tile-border: Border color for product element tiles. Default is var(--mmq-grey-50).
--product-tile-border-radius: Border radius for product element tiles. Default is 4px.

Dependencies: mmq-formatted-message, mmq-icon, mmq-tooltip, mmq-mobile-search, mmq-product-tile

mmq-tab-finishes

Description: Tab component for viewing and selecting finishes.

Dependencies: mmq-loader, mmq-img, mmq-tooltip, mmq-zoombox

mmq-tab-gallery

Description: Tab component for displaying product gallery.

CSS Variables:

--mmq-loader-color: Color of the loader animation. Default is the accent color.

Dependencies: mmq-loader, mmq-gallery

mmq-tab-popular

Description: Tab component for displaying popular products.

Dependencies: mmq-loader, mmq-img, mmq-formatted-price

Description: Tab component for related products.

Dependencies: mmq-related-products

mmq-tab-summary

Description: Tab component for displaying product summary information.

CSS Variables:

--mmq-loader-color: Color of the loader animation. Default is the accent color.

Dependencies: mmq-element-item

mmq-tab-text

Description: Tab component for displaying text content.

Dependencies: None

mmq-tabs

Description: Component for organizing content into separate tabbed views.

CSS Variables:

--mmq-tabs-bottom-spacing: Bottom spacing for tabs.
--mmq-tabs-mobile-top-spacing: Top spacing for tabs on mobile devices. Default is 15px.
--mmq-tabs-top-spacing: Top spacing for tabs on desktop devices. Default is 60px.

Dependencies: None

mmq-text-field

Description: Text input component with various styling and validation options.

Parts:

control: The form control wrapper around the input
error-adornment: Error icon container
error-info-icon: Error icon
error-msg: Error message container
helper-text: Helper text container
input: The input wrapper element
label: The label element
length: The character length counter
nativeInput: The native input element
notch: The notch in the outline where the label sits
outline: The outline element for the outlined variant
required: The required indicator element
textarea: The native textarea element when multiline is true

Dependencies: mmq-form-control, mmq-input-label, mmq-required-label, mmq-formatted-message, mmq-length-counter, mmq-input, mmq-input-adornment, mmq-icon, mmq-form-helper-text

Description: Widget for selecting and configuring texture/image options.

Parts:

container: Main container for the texture widget
empty-icon: Icon displayed when no image is selected
file-input: File input element for uploading textures
flex: Flex container for layout
icon: Arrow/caret icon
image-configurator: Container for image configuration tools
img: The image element
img-wrapper: Container for the image preview
option-data: Container for option information
overlay: Overlay shown on hover
plus-icon: Plus icon for adding an image
replace: Replace icon shown on hover

Dependencies: mmq-tooltip, mmq-img, mmq-loader, mmq-icon, mmq-image-configurator

mmq-thumbnail-item

Description: Displays a selectable thumbnail image with support for hover effects and selection states.

Parts:

active-border: Border displayed when the thumbnail is selected
image-wrapper: Container for the thumbnail image
img: The thumbnail image element
label: Text label displayed with the thumbnail
placeholder: Placeholder displayed while the image is loading
zoombox: The enlarged view shown on hover

Dependencies: mmq-img, mmq-icon, mmq-tooltip, mmq-zoombox

mmq-thumbnails

Description: Grid display of selectable thumbnail images.

Parts:

grid: Grid layout for organizing the thumbnails
thumbnail-item: Individual thumbnail items
thumbnail-label: Labels for the thumbnails
wrapper: Container for all thumbnails

Dependencies: mmq-thumbnail-item

mmq-thumbnails-groups

Description: Displays multiple groups of thumbnails with selection functionality.

Parts:

options: Container for the thumbnail options
select: The dropdown select element for thumbnail groups
thumbnails: The thumbnails component within the groups

Dependencies: mmq-select, mmq-thumbnails

mmq-toast

Description: A toast notification component for temporary messages.

CSS Variables:

--mmq-toast-max-height: Controls the maximum height of the toast. Defaults to 800px.
--mmq-toast-min-height: Controls the minimum height of the toast. Defaults to 0.

Parts:

action-button: The action button element.
button-container: The container for the close button.
close-button: The close button element.
close-icon: The icon within the close button.
container: The container element for the toast content.
description: The description text of the toast.
title: The title of the toast.

Dependencies: mmq-icon

mmq-toast-container

Description: A container component for managing toast notifications.

CSS Variables:

--mmq-mobile-toast-left: Controls the left position on mobile devices.
--mmq-mobile-toast-right: Controls the right position on mobile devices.
--mmq-mobile-toast-top: Controls the top position on mobile devices. Defaults to 0.
--mmq-mobile-toast-transform: Controls the transform property on mobile devices. Defaults to inherit.
--mmq-mobile-toast-width: Controls the width on mobile devices. Defaults to var(--mmq-toast-width).
--mmq-toast-bottom: Controls the bottom position of the toast container. Applied based on placement.
--mmq-toast-left: Controls the left position of the toast container. Applied based on placement.
--mmq-toast-right: Controls the right position of the toast container. Applied based on placement.
--mmq-toast-top: Controls the top position of the toast container. Applied based on placement.
--mmq-toast-transform: Controls the transform property for positioning. Defaults to translateX(-50%) for centered placements.
--mmq-toast-width: Controls the width of the toast container. Defaults to 100%.
--mmq-toast-z-index: Controls the z-index of the toast container. Defaults to 10016.

Parts:

inline-notification: The inline notification element.
root: The root element of the toast container.
toast: The toast element.

Dependencies: mmq-inline-notification, mmq-toast

Description: A tooltip component for displaying additional information on hover or focus.

Dependencies: None

mmq-unsaved-changes-prompt

Description: Modal prompt for handling unsaved changes.

CSS Variables:

--mmq-background-white: Controls the background color of the dialog
--mmq-box-shadow-primary: Controls the primary box shadow color
--mmq-box-shadow-secondary: Controls the secondary box shadow color
--mmq-button-padding-small: Controls the padding of small buttons
--mmq-dialog-bottom: Controls the bottom position of the dialog
--mmq-dialog-content-padding: Controls the padding of the content area
--mmq-dialog-footer-padding: Controls the padding of the footer area
--mmq-dialog-header-height: Controls the height of the dialog header
--mmq-dialog-header-padding: Controls the padding of the dialog header
--mmq-dialog-height: Controls the height of the dialog
--mmq-dialog-left: Controls the left position of the dialog
--mmq-dialog-margin: Controls the margin around the dialog
--mmq-dialog-max-height: Controls the maximum height of the dialog
--mmq-dialog-max-width: Controls the maximum width of the dialog
--mmq-dialog-mobile-margin: Controls the margin on mobile devices
--mmq-dialog-overflow: Controls the overflow behavior of the dialog
--mmq-dialog-padding: Controls the padding inside the dialog
--mmq-dialog-position: Controls the position property of the dialog (default: relative)
--mmq-dialog-right: Controls the right position of the dialog
--mmq-dialog-top: Controls the top position of the dialog
--mmq-dialog-width: Controls the width of the dialog (desktop only)
--mmq-dialog-width: Controls the width of the dialog
--mmq-dialog-z-index: Controls the z-index stacking order of the dialog

Dependencies: mmq-dialog-header, mmq-formatted-message, mmq-dialog-content, mmq-dialog-footer, mmq-button

mmq-variant-ui

Description: Main UI component for the product configurator view that orchestrates the entire configurator experience.

CSS Variables:

--mmq-configurator-container-height: The height of the configurator. Default is calculated as 100vh minus margins.
--mmq-configurator-container-max-height: Maximum height constraint for the configurator. Default is 900px.
--mmq-configurator-container-min-height: Minimum height constraint for the configurator. Default is 375px.
--mmq-canvas-height: Height of the 3D canvas area on mobile. Required on mobile
--mmq-variant-ui-extra-space: Extra space for fixed elements like headers. Default is 0px.
--mmq-sidepanel-width: Width of the side panel (desktop). Default is 379px.
--mmq-tablet-sidepanel-width: Width of the side panel (tablet). Default is 35%.
--mmq-configurator-page-container-vertical-padding: Vertical padding for the page container. Default is 10px.
--canvas-max-height: Maximum canvas height (internal calculation)
--canvas-min-height: Minimum canvas height (internal calculation)
--canvas-no-options-height: Canvas height without options (internal calculation)
--available-viewport-y: Available vertical space (internal calculation)
--mmq-viewport-height: Viewport height value. Default is 100vh.
--mmq-configurator-wrapper-mobile-base-height: Mobile base height (viewport dependent)
--mmq-configurator-wrapper-mobile-vertical-padding: Mobile vertical padding (as needed)
--mmq-configurator-wrapper-vertical-padding: Vertical padding (as needed)

Parts:

wrapper: Main container that wraps all configurator elements
content: Container for the 3D/2D canvas and related controls
canvas-container: Container specifically for the 3D/2D visualization canvas
side-panel: Container for options and customization panel
side-panel-container: Container for the side panel
side-panel-content: Content area of the side panel
side-panel-footer: Footer of the side panel
side-panel-group: Group container in the side panel
side-panel-group-content: Content area for a group in the side panel
side-panel-group-header: Header for a group in the side panel
side-panel-group-item-button: Button element within a group item
side-panel-group-item-button-expanded: Button element when group is expanded
side-panel-header: Header of the side panel
header: Header displayed on desktop devices
mobile-header: Header displayed on mobile devices
fullscreen-header: Header displayed in fullscreen mode
footer: Footer element containing product information and controls
finish-btn: Button to complete configuration
price-value-field: Element showing price on mobile
price-container: Container for price information on mobile
summary-box-price: Element showing price on desktop
summary-box-price-wrapper: Wrapper for the price display in summary box
brand: Element that displays the brand name
product-name: Element that displays the product name
name-wrapper: Container for product name and brand information
carousel: Container for the thumbnail carousel
carousel-wrapper: Wrapper element for the carousel content
carousel-thumbs: Container for the thumbnail images
carousel-thumb: Individual thumbnail image in the carousel
carousel-thumb-3d: Special thumbnail representing the 3D view
carousel-indicators: Container for the carousel position indicators
carousel-indicator: Individual indicator/dot for the carousel
carousel-arrow-left: Left navigation arrow for the carousel
carousel-arrow-right: Right navigation arrow for the carousel
drag-tooltip: Tooltip indicating drag interaction is available
fullscreen-button: Button to exit fullscreen mode
qty-box: Container for quantity inputs
qty-button-down: Quantity decrease button
qty-button-up: Quantity increase button
ar-button: Button that launches AR view
components-mapper: Components mapper container
block-header: Header for a configuration block

Dependencies: mmq-mobile-header, mmq-new-image-panel-header, mmq-quote-preview-ui, mmq-image-panel-footer, mmq-quick-icons, mmq-full-screen-button, mmq-canvas-buttons, mmq-price-value, mmq-see-changes-overlay, mmq-toast-container, mmq-side-panel, mmq-hotspot-modal

mmq-vimeo

Description: Component for embedding Vimeo videos.

Dependencies: None

mmq-warning-3d

Description: Warning component for 3D visualization issues.

Parts:

icon: The warning icon

Dependencies: mmq-quick-icon-button, mmq-icon, mmq-tooltip

Description: Modal displayed when WebGL is not supported by the browser.

CSS Variables:

--mmq-background-white: Controls the background color of the dialog
--mmq-box-shadow-primary: Controls the primary box shadow color
--mmq-box-shadow-secondary: Controls the secondary box shadow color
--mmq-dialog-bottom: Controls the bottom position of the dialog
--mmq-dialog-content-padding: Controls the padding of the content area
--mmq-dialog-footer-padding: Controls the padding of the footer area
--mmq-dialog-height: Controls the height of the dialog
--mmq-dialog-left: Controls the left position of the dialog
--mmq-dialog-margin: Controls the margin around the dialog
--mmq-dialog-max-height: Controls the maximum height of the dialog
--mmq-dialog-max-width: Controls the maximum width of the dialog
--mmq-dialog-mobile-margin: Controls the margin on mobile devices
--mmq-dialog-overflow: Controls the overflow behavior of the dialog
--mmq-dialog-padding: Controls the padding inside the dialog
--mmq-dialog-position: Controls the position property of the dialog (default: relative)
--mmq-dialog-right: Controls the right position of the dialog
--mmq-dialog-top: Controls the top position of the dialog
--mmq-dialog-width: Controls the width of the dialog (desktop only)
--mmq-dialog-width: Controls the width of the dialog
--mmq-dialog-z-index: Controls the z-index stacking order of the dialog

Parts:

button: The button used to close the modal
content: The content section of the modal
footer: The footer section containing action buttons
header: The header text of the modal
icon: The warning icon displayed in the modal

Dependencies: mmq-dialog-content, mmq-icon, mmq-formatted-message, mmq-dialog-footer, mmq-button

mmq-youtube

Description: Component for embedding YouTube videos.

Dependencies: None

mmq-zoom-all

Description: Button component to zoom out and view the entire model.

Parts:

zomm-all-button: The zoom all button

Dependencies: mmq-quick-icon-button, mmq-icon

mmq-zoom-buttons

Description: Controls for zooming in and out of the 3D view.

Parts:

button: The zoom in/out buttons

Dependencies: mmq-quick-icon-button, mmq-icon

mmq-zoombox

Description: Enlarged preview of thumbnails with additional details.

Parts:

comment: Additional information or description
footer: Container for image metadata
img: The image element
name: Display of the image name
type: Display of the image type

Dependencies: mmq-img

Common Customization Examples

Using Class Selectors

You can use class selectors to target specific instances of components or when using CSS frameworks:

/* Target all buttons with class-based selector */
.mmq-button {
  --mmq-button-border-radius: 8px;
  --mmq-button-padding: 12px 24px;
}

/* Target a specific button inside a container */
.product-page .mmq-button {
  --mmq-button-color: #ff5722;
}

/* Target multiple component types */
.mmq-dialog,
.mmq-modal-filter,
.mmq-hotspot-modal {
  --mmq-dialog-max-width: 500px;
}

/* Target only one specific instance with an ID */
#checkout-basket.mmq-basket {
  --mmq-basket-button-position-right: 40px;
}

Custom Button Styling

/* Customize all buttons with rounded corners */
mmq-button {
  --mmq-button-border-radius: 8px;
  --mmq-button-padding: 12px 24px;
}

/* Style specific button in the variant UI */
mmq-variant-ui::part(finish-btn) {
  background-color: var(--mmq-accent-main);
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Style buttons of a particular variant using classes */
.mmq-button.primary {
  --mmq-button-color: white;
  --mmq-button-bg-hover: #0056b3;
  background-color: #0275d8;
}

.mmq-button.secondary {
  --mmq-button-color: #212529;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

Custom Dialog Styling

/* Style all dialogs */
mmq-dialog, .mmq-dialog {
  --mmq-dialog-border-radius: 12px;
  --mmq-dialog-max-width: 600px;
}

/* Style dialog header */
mmq-dialog-header, .mmq-dialog-header {
  --mmq-dialog-header-background: var(--mmq-accent-main);
  --mmq-dialog-header-padding: 20px 24px;
}

/* Style header title */
mmq-dialog-header::part(title) {
  color: white;
  font-weight: 700;
}

/* Style close button */
mmq-dialog-header::part(close-button) {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

/* Style different dialog types using classes */
.mmq-dialog.confirmation-dialog {
  --mmq-dialog-width: 400px;
}

.mmq-dialog.editor-dialog {
  --mmq-dialog-width: 800px;
  --mmq-dialog-height: 600px;
}

Custom Side Panel Styling

/* Adjust side panel width and position */
.mmq-side-panel {
  --mmq-side-panel-width: 400px;
  --mmq-side-panel-top: 0;
  --mmq-side-panel-bottom: 0;
  --mmq-side-panel-right: 0;
}

/* Style group headers */
.mmq-side-panel::part(side-panel-group-header) {
  background-color: #f5f5f5;
  border-left: 3px solid var(--mmq-accent-main);
  padding: 12px 16px;
}

/* Style expanded group items */
.mmq-side-panel::part(side-panel-group-item-button-expanded) {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Target specific side panel in different product categories */
.furniture-category .mmq-side-panel {
  --mmq-side-panel-width: 350px;
}

.electronics-category .mmq-side-panel {
  --mmq-side-panel-width: 450px;
}

Custom Basket Styling

/* Customize basket button */
.mmq-basket {
  --mmq-basket-button-background: var(--mmq-accent-main);
  --mmq-basket-button-color: white;
  --mmq-basket-button-radius: 50%;
  --mmq-basket-button-position-right: 20px;
  --mmq-basket-button-position-bottom: 20px;
}

/* Style counter badge */
.mmq-basket::part(counter) {
  background-color: white;
  color: var(--mmq-accent-main);
  font-weight: bold;
}

/* Style panel */
.mmq-basket::part(panel) {
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

/* Position basket differently on different pages */
.product-page .mmq-basket {
  --mmq-basket-button-position-right: 20px;
  --mmq-basket-button-position-bottom: 20px;
}

.cart-page .mmq-basket {
  --mmq-basket-button-position-right: 40px;
  --mmq-basket-button-position-bottom: 40px;
  --mmq-basket-button-background: #333;
}

Mobile Tabs Customization

/* Customize mobile tabs appearance */
.mmq-mobile-tabs {
  --mmq-mobile-tabs-min-height: 130px;
  --mmq-dialog-header-background: #f5f5f5;
  --mmq-text-align: center;
}

/* Style finish button */
.mmq-mobile-tabs::part(finish-btn) {
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 0;
}

/* Style active tab */
.mmq-mobile-tabs::part(tab-active) {
  border-bottom: 3px solid var(--mmq-accent-main);
  font-weight: 700;
}

/* Different styles for different product types */
.simple-product .mmq-mobile-tabs {
  --mmq-mobile-tabs-min-height: 100px;
}

.complex-product .mmq-mobile-tabs {
  --mmq-mobile-tabs-min-height: 150px;
}

Custom Configurator Dimensions

/* Adjust configurator dimensions */
:root {
  --mmq-configurator-container-max-height: 800px;
  --mmq-configurator-container-min-height: 400px;
  --mmq-sidepanel-width: 350px;
  
  /* Mobile-specific adjustments */
  @media (max-width: 839px) {
    --mmq-canvas-height: 250px;
    --mmq-configurator-wrapper-mobile-vertical-padding: 0px;
    --mmq-mobile-tabs-min-height: 150px;
  }
}

/* Product-specific configurations using classes */
.tall-product .mmq-variant-ui {
  --mmq-configurator-container-max-height: 1000px;
}

.compact-product .mmq-variant-ui {
  --mmq-configurator-container-max-height: 600px;
  --mmq-sidepanel-width: 300px;
}

/* Category-specific configurations */
.furniture-category .mmq-variant-ui {
  --mmq-configurator-container-max-height: 900px;
}

.decor-category .mmq-variant-ui {
  --mmq-configurator-container-max-height: 700px;
}

Theme Integration with External Frameworks

/* Bootstrap integration */
.bootstrap-site .mmq-button {
  --mmq-button-border-radius: 0.375rem; /* Matches Bootstrap's default */
  --mmq-button-padding: 0.375rem 0.75rem;
  --mmq-button-font-weight: 400;
}

/* Material Design integration */
.material-site .mmq-button {
  --mmq-button-border-radius: 4px;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.material-site .mmq-button:hover {
  box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}

/* Tailwind integration */
.tailwind-site .mmq-dialog {
  --mmq-dialog-border-radius: 0.5rem;
  --mmq-box-shadow-primary: rgba(0, 0, 0, 0.1);
  --mmq-box-shadow-secondary: rgba(0, 0, 0, 0.05);
}

How to Use This Reference​

Class Naming Convention​

Components​

mmq-accordion​

mmq-ar-generation-failure​

mmq-ar-incompatible​

mmq-ar-loader​

mmq-ar-modal​

mmq-ar-preview​

mmq-avatar​

mmq-backdrop​

mmq-base-select​

mmq-base-select-menu​

mmq-base-select-option​

mmq-basket​

mmq-basket-additions​

mmq-basket-button​

mmq-basket-contact-details​

mmq-basket-items​

mmq-basket-panel​

mmq-basket-preview​

mmq-button​

mmq-canvas-buttons​

mmq-cart-item​

mmq-checkbox​

mmq-collision-modal​

mmq-color-alpha​

mmq-color-picker​

mmq-color-picker-widget​

mmq-components-mapper​

mmq-contact-form​

mmq-context-provider​

mmq-dialog​

mmq-dialog-content​

mmq-dialog-footer​

mmq-dialog-header​

mmq-document​

mmq-dot-menu​

mmq-dot-menu-content​

mmq-drag-tooltip​

mmq-drawer​

mmq-dropdown-item​

mmq-element-item​

mmq-element-list-modal​

mmq-empty-basket​

mmq-empty-select-message​

mmq-engrave​

mmq-error-modal​

mmq-error-wrapper​

mmq-export-image-modal​

mmq-export-model-modal​

mmq-export-pdf-modal​

mmq-fade-text​

mmq-filter​

mmq-filter-button​

mmq-filter-widget​

mmq-filter-widget-grid​

mmq-form-control​

mmq-form-control-label​

mmq-form-field-set​

mmq-form-helper-text​

mmq-form-label​

mmq-form-legend​

mmq-formatted-message​

mmq-formatted-price​

mmq-full-screen-button​

mmq-gallery​

mmq-generic-tabs​

mmq-header-button​

mmq-hotspot-modal​

mmq-hue​

mmq-icon​

mmq-image-configurator​

mmq-image-panel-footer​

mmq-image-panel-lightbox​

mmq-img​

mmq-img-download-button​

mmq-inline-notification​

mmq-input​

mmq-input-adornment​

How to Use This Reference

Class Naming Convention

Components

mmq-accordion

mmq-ar-generation-failure

mmq-ar-incompatible

mmq-ar-loader

mmq-ar-modal

mmq-ar-preview

mmq-avatar

mmq-backdrop

mmq-base-select

mmq-base-select-menu

mmq-base-select-option

mmq-basket

mmq-basket-additions

mmq-basket-button

mmq-basket-contact-details

mmq-basket-items

mmq-basket-panel

mmq-basket-preview

mmq-button

mmq-canvas-buttons

mmq-cart-item

mmq-checkbox

mmq-collision-modal

mmq-color-alpha

mmq-color-picker

mmq-color-picker-widget

mmq-components-mapper

mmq-contact-form

mmq-context-provider

mmq-dialog

mmq-dialog-content

mmq-dialog-footer

mmq-dialog-header

mmq-document

mmq-dot-menu

mmq-dot-menu-content

mmq-drag-tooltip

mmq-drawer

mmq-dropdown-item

mmq-element-item

mmq-element-list-modal

mmq-empty-basket

mmq-empty-select-message

mmq-engrave

mmq-error-modal

mmq-error-wrapper

mmq-export-image-modal

mmq-export-model-modal

mmq-export-pdf-modal

mmq-fade-text

mmq-filter

mmq-filter-button

mmq-filter-widget

mmq-filter-widget-grid

mmq-form-control

mmq-form-control-label

mmq-form-field-set

mmq-form-helper-text

mmq-form-label

mmq-form-legend

mmq-formatted-message

mmq-formatted-price

mmq-full-screen-button

mmq-gallery

mmq-generic-tabs

mmq-header-button

mmq-hotspot-modal

mmq-hue

mmq-icon

mmq-image-configurator

mmq-image-panel-footer

mmq-image-panel-lightbox

mmq-img

mmq-img-download-button

mmq-inline-notification

mmq-input

mmq-input-adornment