maz-ui 5.1.0 → 5.2.0-beta.0

package/docs/plugins/dialog.md

@@ -53,7 +53,8 @@ You can display a simple dialog with a title and a message. The dialog will have
 
 ```vue
 <script lang="ts" setup>
-import { useDialog, useToast } from 'maz-ui/composables'
+import { useDialog } from 'maz-ui/composables/useDialog'
+import { useToast } from 'maz-ui/composables/useToast'
 
 const dialog = useDialog()
 const toast = useToast()
@@ -91,7 +92,8 @@ The buttons property allows you to display custom buttons in the dialog and repl
 
 ```vue
 <script lang="ts" setup>
-import { useDialog, useToast } from 'maz-ui/composables'
+import { useDialog } from 'maz-ui/composables/useDialog'
+import { useToast } from 'maz-ui/composables/useToast'
 
 const dialog = useDialog()
 const toast = useToast()
@@ -143,7 +145,8 @@ The buttons property allows you to display custom buttons in the dialog and repl
 
 ```vue
 <script lang="ts" setup>
-import { useDialog, useToast } from 'maz-ui/composables'
+import { useDialog } from 'maz-ui/composables/useDialog'
+import { useToast } from 'maz-ui/composables/useToast'
 
 const dialog = useDialog()
 const toast = useToast()
@@ -161,7 +164,7 @@ async function openDialogResponse() {
       },
       {
         text: 'Accept',
-        type: 'resolve',
+        type: 'accept',
         response: 'Accepted Response',
         color: 'secondary',
       }
@@ -193,7 +196,8 @@ You can close the dialog programmatically by calling the close method returned b
 
 ```vue
 <script lang="ts" setup>
-import { useDialog, useToast } from 'maz-ui/composables'
+import { useDialog } from 'maz-ui/composables/useDialog'
+import { useToast } from 'maz-ui/composables/useToast'
 
 const dialog = useDialog()
 

package/docs/rules.md

@@ -7,42 +7,57 @@ description: "How to use maz-ui and its ecosystem in this project: look-up workf
 
 > These rules and the docs in `node_modules/maz-ui/docs` match the installed version of maz-ui (`node_modules/maz-ui/package.json`).
 
-This project is built with **maz-ui** and its ecosystem (`@maz-ui/themes`, `@maz-ui/icons`, `@maz-ui/utils`, `@maz-ui/translations`, `@maz-ui/nuxt`). Reuse what it provides instead of re-implementing it: most UI elements, helpers, icons and styles you need already exist.
+This project is built with **maz-ui** and its ecosystem. Reuse what it provides instead of re-implementing it: most UI elements, helpers, icons and styles you need already exist.
 
 ### Look it up before you write it
 
-Before creating a component, composable, helper, icon or style, check what maz-ui offers:
+- **MCP server `maz-ui`** (when available): `search_docs` (describe the need: "confirm before delete"), `get_component_api`, `find_icons`, `get_theme_tokens`, `get_doc`, `review_code`.
+- **Version-matched docs** in `node_modules/maz-ui/docs/` (start with `README.md`; in a monorepo, the `maz-ui` of the app).
 
-- **MCP server `maz-ui`** (when available): `search_docs` (describe the need: "confirm before delete", "phone input"), `get_component_api` (exact props, events, slots), `find_icons`, `get_theme_tokens` (Tailwind classes of the project and of maz-ui), `get_doc`, `review_code`.
-- **Version-matched docs** in `node_modules/maz-ui/docs/` (start with `README.md`; in a monorepo, resolve `maz-ui` from the app package). Read the relevant page before using an API.
+Never guess an API: only use documented props, events, slots and imports.
 
-Never guess an API: only use props, events, slots and imports that are documented.
+### Which package for what
+
+`maz-ui` (components, composables, directives, plugins), `@maz-ui/themes` (brand colors, fonts, dark mode), `@maz-ui/icons` (icons, logos, flags), `@maz-ui/utils` (helpers), `@maz-ui/translations` (texts of the components), `@maz-ui/nuxt` (Nuxt module).
 
 ### Components
 
-- Use `Maz*` components instead of native elements or hand-made widgets: `MazBtn` (not `<button>`), `MazInput`, `MazSelect`, `MazCheckbox`, `MazSwitch`, `MazTextarea`, `MazDialog`, `MazDialogConfirm`, `MazDrawer`, `MazBottomSheet`, `MazPopover`, `MazDropdown`, `MazTabs`, `MazTable`, `MazCard`, `MazAvatar`, `MazBadge`, `MazAlert`, `MazSkeleton`, `MazSpinner`, `MazDatePicker`, `MazInputPhoneNumber`, `MazDropzone`, `MazStepper`, `MazSidebar`, `MazPagination`...
+- Use `Maz*` components instead of native elements or hand-made widgets: `MazBtn` (not `<button>`), `MazLink`, `MazInput`, `MazSelect`, `MazCheckbox`, `MazDialog`, `MazDrawer`, `MazPopover`, `MazDropdown`, `MazTabs`, `MazTable`, `MazCard`, `MazAvatar`, `MazBadge`, `MazAlert`, `MazDatePicker`, `MazInputPhoneNumber`, `MazDropzone`, `MazPagination`...
 - Prop values are typed: colors are `primary | secondary | accent | info | success | warning | destructive | contrast | transparent` (plus `surface` on some components), sizes `mini | xs | sm | md | lg | xl`.
-- Feedback and overlays: `useToast()` for notifications, `useDialog()` or `MazDialogConfirm` for confirmations, `useWait()` for loading states.
+- A button with only an icon needs an `aria-label`.
+
+### Feedback, overlays and forms
+
+- `useToast()` for notifications, `useDialog()` or `MazDialogConfirm` for confirmations, `useWait()` for loading states, `MazSkeleton` / `MazSpinner` while data loads.
+- These composables need their plugin. Vue: `app.use(ToastPlugin)` from `maz-ui/plugins/toast` (`DialogPlugin`, `WaitPlugin`, `AosPlugin` likewise). Nuxt: `mazUi: { plugins: { toast: true } }`, off by default like the directives (`mazUi.directives.vTooltip`, or import the directive).
 - Forms: `useFormValidator` / `useFormField` with your Standard Schema library (Zod, Valibot, ArkType).
 
 ### Icons
 
-Use `@maz-ui/icons` (860+ icons: `MazTrash`, `MazXMark`, `MazMagnifyingGlass`, `MazFlagFR`, `MazLogoVue`...). Never inline SVG or add another icon library. Pass icon components to icon props: `<MazBtn :start-icon="MazTrash">`.
+Use `@maz-ui/icons`, never inline SVG nor another icon library. Pick the format by usage:
+
+- **Icon props** (`<MazBtn :start-icon>`, `<MazIcon :icon>`...): the raw SVG string, the lightest, `@maz-ui/icons/raw/MazTrash`.
+- **Directly in a template**: the component, `@maz-ui/icons/static/MazTrash`, then `<MazTrash class="size-5 text-muted" />` (size and color from the text: `1em`, `currentColor`).
+- **Not visible at first render** (`v-if`, menus, dialogs, tabs): the lazy component, `@maz-ui/icons/lazy/MazTrash`. Never for icons visible on load: each one is an extra request.
+- `<img>` or CSS only for multicolor icons (flags, logos): `@maz-ui/icons/svg/<name>.svg`, the text color does not apply there.
 
-### Helpers and composables
+### Helpers
 
-Use `@maz-ui/utils` and maz-ui composables instead of lodash, VueUse or hand-written code: `debounce`, `throttle`, `sleep`, `isEqual`, `capitalize`, `formatCurrency`, `formatDate`, `formatNumber`, `formatPhoneNumber`, `getCookie`/`setCookie`, `useBreakpoints`, `useWindowSize`, `useTimer`, `useIdleTimeout`, `useSwipe`, `vClickOutside`, `vTooltip`, `vLazyImg`...
+Use `@maz-ui/utils/helpers/<name>` and the maz-ui composables instead of lodash, VueUse or hand-written code: `debounce`, `throttle`, `sleep`, `isEqual`, `formatCurrency`, `formatDate`, `formatNumber`, `formatPhoneNumber`, `capitalize`, `normalizeString`, `getCookie` / `setCookie`, `useBreakpoints`, `useWindowSize`, `useTimer`, `useIdleTimeout`, `useSwipe`, `vClickOutside`, `vTooltip`, `vLazyImg`...
+
+### Texts and languages
+
+The texts built in the components come from `@maz-ui/translations`: change the language with `useTranslations().setLocale('fr')` and customize the texts in its options, not in every component.
 
 ### Styling with Tailwind
 
 The maz-ui theme is exposed to Tailwind (`@import 'maz-ui/tailwindcss/theme.css'`) and the project usually extends it. Only use theme tokens:
 
-- **Project tokens first**: the Tailwind entry of the project (the CSS file that imports `maz-ui/tailwindcss/theme.css`) adds its own `@theme` tokens (fonts, animations, colors...), `@custom-variant` and `@utility`, and the `definePreset` file sets the brand values of the maz-ui tokens. `get_theme_tokens` lists both; without the MCP server, read these files. When a value is missing, add a token to the project `@theme` and use its class instead of an arbitrary value.
-
-- Colors: `primary`, `secondary`, `accent`, `info`, `success`, `warning`, `destructive`, `contrast` (each with `-foreground` and `-50` to `-950`), `surface`, `foreground`, `muted`, `divider`, `overlay`, plus `bg-container` and `bg-input`. Example: `bg-surface text-foreground border-divider`, `bg-primary text-primary-foreground`, `text-muted`.
-- Never use the default Tailwind palette (`bg-blue-500`, `text-gray-600`, `bg-white`, `text-black`) nor hard-coded colors (`#fff`, `rgb()`, `bg-[#...]`). Theme colors already adapt to dark mode: do not add `dark:` color overrides.
+- **Project tokens first**: the Tailwind entry of the project adds its own `@theme` tokens, variants and utilities, and the `definePreset` file sets the brand values. `get_theme_tokens` lists both (or read these files). When a value is missing, add a token to the project `@theme` instead of an arbitrary value.
+- Colors: `primary`, `secondary`, `accent`, `info`, `success`, `warning`, `destructive`, `contrast` (each with `-foreground` and `-50` to `-950`), `surface`, `foreground`, `muted`, `divider`, `overlay`, `bg-container`, `bg-input`. Example: `bg-surface text-foreground border-divider`.
+- Never the default Tailwind palette (`bg-blue-500`, `text-gray-600`, `bg-white`, `text-black`) nor hard-coded colors (`#fff`, `rgb()`, `bg-[#...]`). Theme colors already adapt to dark mode: no `dark:` color overrides.
 - Radius `rounded-*`, shadows `shadow-sm` to `shadow-xl` and `shadow-elevation`, spacing scale (`p-4`, `gap-2`), breakpoints `mob-*`, `tab-*`, `lap-*` (plus `sm` to `2xl`), utilities `flex-center`, `padded-container`.
-- **No `maz:` prefix** in this project: it is internal to the maz-ui library and its documentation.
+- **No `maz:` prefix** in this project: it is internal to the maz-ui library.
 - In custom CSS, use the variables: `var(--maz-primary)`, `var(--maz-rounded-md)`, `calc(var(--maz-space) * 4)`.
 
 ### Theme
@@ -51,8 +66,8 @@ Brand colors, fonts, radius and spacing come from a `@maz-ui/themes` preset (`de
 
 ### Imports
 
-- Deep imports: `maz-ui/components/MazBtn`, `maz-ui/composables/useToast`, `maz-ui/directives/vTooltip`, `@maz-ui/utils/helpers/debounce`, `@maz-ui/icons/static/MazTrash`. The `maz-ui` root entry only exports types. Never import from `maz-ui/src` or `maz-ui/dist`.
-- With `@maz-ui/nuxt`, components and composables are auto-imported: do not import them.
+- Deep imports: `maz-ui/components/MazBtn`, `maz-ui/composables/useToast`, `maz-ui/directives/vTooltip`, `maz-ui/plugins/toast`, `@maz-ui/utils/helpers/debounce`, `@maz-ui/icons/raw/MazTrash`. The `maz-ui` root entry only exports types. Never import from `maz-ui/src` or `maz-ui/dist`.
+- With `@maz-ui/nuxt`, components and composables are auto-imported: do not import them. Icons are not: import them. The theme and the translations are set in the `mazUi` options of `nuxt.config`, not with the `MazUi` Vue plugin.
 
 ### Before you finish
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "maz-ui",
   "type": "module",
-  "version": "5.1.0",
+  "version": "5.2.0-beta.0",
   "description": "A standalone components library for Vue.Js 3 & Nuxt.Js 3",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -201,10 +201,10 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^2.0.1",
-    "@maz-ui/icons": "5.0.0",
-    "@maz-ui/themes": "5.0.0",
-    "@maz-ui/translations": "5.0.0",
-    "@maz-ui/utils": "5.0.0",
+    "@maz-ui/icons": "^5.2.0-beta.0",
+    "@maz-ui/themes": "^5.2.0-beta.0",
+    "@maz-ui/translations": "^5.2.0-beta.0",
+    "@maz-ui/utils": "^5.2.0-beta.0",
     "@tanstack/vue-virtual": "^3.13.47",
     "chart.js": "^4.5.1",
     "dayjs": "^1.11.23",
@@ -213,27 +213,45 @@
     "marked": "^18.1.1"
   },
   "devDependencies": {
-    "@maz-ui/eslint-config": "5.0.0",
-    "@maz-ui/node": "5.1.0",
-    "@maz-ui/stylelint-config": "5.0.0",
-    "@maz-ui/vite-config": "0.0.0",
+    "@codecov/vite-plugin": "^2.0.1",
+    "@maz-ui/eslint-config": "^5.0.0",
+    "@maz-ui/node": "^5.2.0-beta.0",
+    "@maz-ui/stylelint-config": "^5.2.0-beta.0",
+    "@maz-ui/vite-config": "^0.0.0",
     "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/postcss": "^4.3.3",
     "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^22.20.5",
+    "@vitejs/plugin-vue": "^6.0.10",
+    "@vitest/coverage-v8": "^5.0.5",
     "@vue/test-utils": "^2.5.1",
     "autoprefixer": "^10.6.1",
+    "cross-env": "^10.1.0",
+    "eslint": "^10.13.0",
+    "glob": "^13.0.6",
     "jsdom": "^30.1.3",
     "lightningcss": "^1.33.0",
     "nuxt": "^4.6.2",
+    "postcss": "^8.5.31",
     "postcss-nested": "^9.0.0",
     "sass": "^1.105.2",
     "shiki": "^4.5.0",
+    "stylelint": "^17.16.0",
     "tailwindcss": "^4.3.3",
+    "tsx": "^4.23.15",
+    "typescript": "^6.0.3",
     "unplugin-auto-import": "^21.1.0",
     "unplugin-vue-components": "^32.1.0",
     "valibot": "^1.5.0",
+    "vite": "^8.3.4",
+    "vite-plugin-dts": "^5.1.2",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vite-svg-loader": "^5.1.3",
+    "vitest": "5.0.5",
     "vitest-axe": "^0.1.0",
+    "vue": "^3.5.44",
     "vue-router": "^5.4.0",
+    "vue-tsc": "3.3.13",
     "zod": "^4.6.7"
   },
   "lint-staged": {

package/dist/assets/MazSelect.D0EtY2Ea.css

@@ -1,2 +0,0 @@
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){[data-v-2e0180bb],[data-v-2e0180bb]:before,[data-v-2e0180bb]:after{--tw-duration:initial;--tw-ease:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-border-style:solid;--tw-scrollbar-thumb:#0000;--tw-scrollbar-track:#0000}[data-v-2e0180bb]::backdrop{--tw-duration:initial;--tw-ease:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-border-style:solid;--tw-scrollbar-thumb:#0000;--tw-scrollbar-track:#0000}}}.m-select.--disabled .m-select-input[data-v-2e0180bb]{cursor:var(--maz-disabled-cursor)}.m-select[data-v-2e0180bb]:not(.--disabled) .m-input-input{cursor:pointer}.m-select.--is-open .m-select-chevron[data-v-2e0180bb]{transform:rotate(180deg)}.m-select button.maz-custom[data-v-2e0180bb]{cursor:pointer;appearance:none;--tw-border-style:none;border-style:none}.m-select button.maz-custom[data-v-2e0180bb]:disabled{cursor:var(--maz-disabled-cursor)}.m-select-chevron[data-v-2e0180bb]{color:var(--maz-color-muted,var(--maz-muted));transition-property:all;transition-timing-function:var(--tw-ease,var(--ease-out));transition-duration:var(--tw-duration,var(--duration-normal));--tw-duration:.3s;--tw-ease:var(--maz-easing-out,cubic-bezier(.4, 0, .2, 1));transition-duration:.3s;transition-timing-function:var(--maz-easing-out,cubic-bezier(.4, 0, .2, 1));font-size:1.2em}.m-select-input[data-v-2e0180bb]{cursor:pointer;width:100%;height:100%}.m-select-input[data-v-2e0180bb] input{caret-color:#0000}.m-select-input__toggle-button[data-v-2e0180bb]{background-color:#0000;justify-content:center;align-items:center;height:100%;padding-inline-start:0;display:flex}.m-select-list[data-v-2e0180bb]{z-index:1050;gap:var(--maz-space);border-radius:var(--maz-rounded-md);background-color:var(--maz-container-bg,var(--maz-surface));--tw-shadow:var(--maz-shadow-style-elevation);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-drop-shadow-size:drop-shadow(0 3px 3px var(--tw-drop-shadow-color,#0000001f));--tw-drop-shadow:drop-shadow(var(--maz-drop-shadow-md,0 3px 3px #0000001f));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);flex-direction:column;min-inline-size:3.5rem;display:flex;overflow:hidden}.m-select-list-item[data-v-2e0180bb]{cursor:pointer;align-items:center;gap:calc(var(--maz-space) * 3);text-overflow:ellipsis;white-space:nowrap;border-radius:var(--maz-rounded-md);border-style:var(--tw-border-style);border-width:var(--maz-border-width);--tw-border-style:solid;width:100%;padding-inline:calc(var(--maz-space) * 3);padding-block:calc(var(--maz-space) * 2);text-align:start;--tw-outline-style:none;background-color:#0000;border-style:solid;border-color:#0000;outline-style:none;display:flex;overflow:hidden}@media (forced-colors:active){.m-select-list-item[data-v-2e0180bb]{outline-offset:2px;outline:2px solid #0000}}.m-select-list-item[data-v-2e0180bb]{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--ease-out));transition-duration:var(--tw-duration,var(--duration-normal));--tw-duration:.3s;--tw-ease:var(--maz-easing-in-out,cubic-bezier(.4, 0, .2, 1));transition-duration:.3s;transition-timing-function:var(--maz-easing-in-out,cubic-bezier(.4, 0, .2, 1))}.m-select-list-item[data-v-2e0180bb]:focus-within{background-color:var(--maz-color-surface-600,oklch(from var(--maz-surface) clamp(0, calc(l - .05), 1) c h))}@media (hover:hover){.m-select-list-item[data-v-2e0180bb]:hover{background-color:var(--maz-color-surface-600,oklch(from var(--maz-surface) clamp(0, calc(l - .05), 1) c h))}}.m-select-list-item[data-v-2e0180bb]:where(.dark,.dark *):focus-within{background-color:var(--maz-color-surface-400,oklch(from var(--maz-surface) clamp(0, calc(l + .06), 1) c h))}@media (hover:hover){.m-select-list-item[data-v-2e0180bb]:where(.dark,.dark *):hover{background-color:var(--maz-color-surface-400,oklch(from var(--maz-surface) clamp(0, calc(l + .06), 1) c h))}}.m-select-list-item span[data-v-2e0180bb]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.m-select-list-item.--is-none-value[data-v-2e0180bb]{color:var(--maz-color-muted,var(--maz-muted))}.m-select-list-item.--is-selected[data-v-2e0180bb]{color:var(--selected-text-color);background-color:var(--selected-bg-color)}.m-select-list-item.--is-selected[data-v-2e0180bb]:focus-within{outline:var(--selected-text-color) solid var(--maz-border-width);outline-offset:2px}.m-select-list-item.--is-selected.--transparent[data-v-2e0180bb]{background-color:var(--maz-color-surface,var(--maz-surface))}.m-select-list__no-results[data-v-2e0180bb]{padding:calc(var(--maz-space) * 4);justify-content:center;align-items:center;display:flex}.m-select-list__scroll-wrapper[data-v-2e0180bb]{gap:var(--maz-space);padding:calc(var(--maz-space) * 2);flex-direction:column;flex:1;display:flex;overflow:auto}.m-select-list__scroll-wrapper[data-v-2e0180bb]::-webkit-scrollbar{inline-size:.1875rem}.m-select-list__scroll-wrapper[data-v-2e0180bb]::-webkit-scrollbar-track{background:0 0}.m-select-list__scroll-wrapper[data-v-2e0180bb]::-webkit-scrollbar-thumb{background-color:var(--maz-color-surface-600,oklch(from var(--maz-surface) clamp(0, calc(l - .05), 1) c h))}.m-select-list__scroll-wrapper[data-v-2e0180bb]::-webkit-scrollbar-thumb:where(){background-color:var(--maz-color-surface-400,oklch(from var(--maz-surface) clamp(0, calc(l + .06), 1) c h))}.m-select-list__scroll-wrapper[data-v-2e0180bb]::-webkit-scrollbar-thumb{border-radius:1000px}.m-select-list__scroll-wrapper[data-v-2e0180bb]{scrollbar-width:thin;--tw-scrollbar-thumb:var(--maz-color-surface-600,oklch(from var(--maz-surface) clamp(0, calc(l - .05), 1) c h));--tw-scrollbar-track:transparent;scrollbar-color:var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)}.m-select-list__search-wrapper[data-v-2e0180bb]{padding-inline:calc(var(--maz-space) * 2);padding-top:calc(var(--maz-space) * 2)}.m-select-list-optgroup[data-v-2e0180bb]{padding:calc(var(--maz-space) * .5);text-align:start;color:var(--maz-color-muted,var(--maz-muted));flex:none;font-size:.875em}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-scrollbar-thumb{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-scrollbar-track{syntax:"<color>";inherits:false;initial-value:#0000}