quasar 2.15.1 → 2.15.3

package/src/components/dialog/test/DialogWrapper.vue

@@ -0,0 +1,17 @@
+<template>
+  <q-dialog ref="dialogRef" v-bind="$attrs">
+    <q-card>
+      <q-card-section>
+        <q-btn label="Dialog Button" />
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+
+  <input />
+</template>
+
+<script setup>
+defineOptions({
+  inheritAttrs: false
+})
+</script>

package/src/components/drawer/QDrawer.js

@@ -1,17 +1,17 @@
 import { h, withDirectives, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, inject, getCurrentInstance } from 'vue'
 
-import useHistory from '../../composables/private/use-history.js'
-import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
-import usePreventScroll from '../../composables/private/use-prevent-scroll.js'
-import useTimeout from '../../composables/use-timeout.js'
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-
-import TouchPan from '../../directives/TouchPan.js'
-
-import { createComponent } from '../../utils/private/create.js'
-import { between } from '../../utils/format.js'
-import { hSlot, hDir } from '../../utils/private/render.js'
-import { layoutKey, emptyRenderFn } from '../../utils/private/symbols.js'
+import useHistory from '../../composables/private.use-history/use-history.js'
+import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private.use-model-toggle/use-model-toggle.js'
+import usePreventScroll from '../../composables/private.use-prevent-scroll/use-prevent-scroll.js'
+import useTimeout from '../../composables/use-timeout/use-timeout.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+
+import TouchPan from '../../directives/touch-pan/TouchPan.js'
+
+import { createComponent } from '../../utils/private.create/create.js'
+import { between } from '../../utils/format/format.js'
+import { hSlot, hDir } from '../../utils/private.render/render.js'
+import { layoutKey, emptyRenderFn } from '../../utils/private.symbols/symbols.js'
 
 const duration = 150
 

package/src/components/drawer/QDrawer.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-model-toggle" ],
+  "mixins": [ "composables/private.use-model-toggle/use-model-toggle" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/layout/drawer"
@@ -9,8 +9,8 @@
     "side": {
       "type": "String",
       "desc": "Side to attach to",
-      "values": [ "left", "right" ],
-      "default": "left",
+      "values": [ "'left'", "'right'" ],
+      "default": "'left'",
       "category": "behavior"
     },
 
@@ -23,8 +23,7 @@
     "width": {
       "type": "Number",
       "desc": "Width of drawer (in pixels)",
-      "default": 300,
-      "examples": [ ":width=\"350\"" ],
+      "default": "300",
       "category": "style"
     },
 
@@ -37,8 +36,7 @@
     "mini-width": {
       "type": "Number",
       "desc": "Width of drawer (in pixels) when in mini mode",
-      "default": 60,
-      "examples": [ ":mini-width=\"100\"" ],
+      "default": "60",
       "category": "style"
     },
 
@@ -62,18 +60,16 @@
     "breakpoint": {
       "type": "Number",
       "desc": "Breakpoint (in pixels) of layout width up to which mobile mode is used",
-      "default": 1023,
-      "examples": [ 1200, ":breakpoint=\"1400\"" ],
+      "default": "1023",
+      "examples": [ "1200" ],
       "category": "behavior"
     },
 
     "behavior": {
       "type": "String",
       "desc": "Overrides the default dynamic mode into which the drawer is put on",
-      "values": [
-        "default", "desktop", "mobile"
-      ],
-      "default": "default",
+      "values": [ "'default'", "'desktop'", "'mobile'" ],
+      "default": "'default'",
       "category": "behavior"
     },
 
@@ -141,17 +137,20 @@
 
     "click": {
       "extends": "click",
-      "desc": "Emitted when user clicks/taps on the component and drawer is NOT in mobile mode; Useful for when taking a decision to toggle mini mode"
+      "desc": "Emitted when user clicks/taps on the component; Useful for when taking a decision to toggle mini mode",
+      "passthrough": true
     },
 
     "mouseover": {
       "extends": "click",
-      "desc": "Emitted when user moves mouse cursor over the component and drawer is NOT in mobile mode; Useful for when taking a decision to toggle mini mode"
+      "desc": "Emitted when user moves mouse cursor over the component; Useful for when taking a decision to toggle mini mode",
+      "passthrough": true
     },
 
     "mouseout": {
       "extends": "click",
-      "desc": "Emitted when user moves mouse cursor out of the component and drawer is NOT in mobile mode; Useful for when taking a decision to toggle mini mode"
+      "desc": "Emitted when user moves mouse cursor out of the component; Useful for when taking a decision to toggle mini mode",
+      "passthrough": true
     },
 
     "mini-state": {

package/src/components/editor/QEditor.js

@@ -3,15 +3,15 @@ import { h, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, getCurre
 import Caret from './editor-caret.js'
 import { getToolbar, getFonts, getLinkEditor } from './editor-utils.js'
 
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useFullscreen, { useFullscreenProps, useFullscreenEmits } from '../../composables/private/use-fullscreen.js'
-import useSplitAttrs from '../../composables/use-split-attrs.js'
-
-import { createComponent } from '../../utils/private/create.js'
-import { stopAndPrevent } from '../../utils/event.js'
-import extend from '../../utils/extend.js'
-import { shouldIgnoreKey } from '../../utils/private/key-composition.js'
-import { addFocusFn } from '../../utils/private/focus-manager.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useFullscreen, { useFullscreenProps, useFullscreenEmits } from '../../composables/private.use-fullscreen/use-fullscreen.js'
+import useSplitAttrs from '../../composables/use-split-attrs/use-split-attrs.js'
+
+import { createComponent } from '../../utils/private.create/create.js'
+import { stopAndPrevent } from '../../utils/event/event.js'
+import extend from '../../utils/extend/extend.js'
+import { shouldIgnoreKey } from '../../utils/private.keyboard/key-composition.js'
+import { addFocusFn } from '../../utils/private.focus/focus-manager.js'
 
 export default createComponent({
   name: 'QEditor',

package/src/components/editor/QEditor.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-fullscreen" ],
+  "mixins": [ "composables/private.use-fullscreen/use-fullscreen" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/editor"
@@ -10,9 +10,7 @@
       "extends": "model-value",
       "type": "String",
       "desc": "Model of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "examples": [
-        "v-model=\"content\""
-      ]
+      "examples": [ "# v-model=\"content\"" ]
     },
 
     "readonly": {
@@ -44,28 +42,22 @@
     "min-height": {
       "type": "String",
       "desc": "CSS unit for the minimum height of the editable area",
-      "default": "10rem",
-      "examples": [
-        "15rem", "50vh"
-      ],
+      "default": "'10rem'",
+      "examples": [ "'15rem'", "'50vh'" ],
       "category": "style"
     },
 
     "max-height": {
       "type": "String",
       "desc": "CSS unit for maximum height of the input area",
-      "examples": [
-        "1000px", "90vh"
-      ],
+      "examples": [ "'1000px'", "'90vh'" ],
       "category": "style"
     },
 
     "height": {
       "type": "String",
       "desc": "CSS value to set the height of the editable area",
-      "examples": [
-        "100px", "50vh"
-      ],
+      "examples": [ "'100px'", "'50vh'" ],
       "category": "style"
     },
 
@@ -73,7 +65,7 @@
       "type": "Object",
       "desc": "Definition of commands and their buttons to be included in the 'toolbar' prop",
       "examples": [
-        ":definitions=\"{ save: { tip: 'Save your work', icon: 'save', label: 'Save', handler: saveWork }, upload: { tip: 'Upload to cloud', icon: 'cloud_upload', label: 'Upload', handler: uploadIt } }\""
+        "{ save: { tip: 'Save your work', icon: 'save', label: 'Save', handler: saveWork }, upload: { tip: 'Upload to cloud', icon: 'cloud_upload', label: 'Upload', handler: uploadIt } }"
       ],
       "definition": {
         "...commandName": {
@@ -85,22 +77,22 @@
             "label": {
               "type": "String",
               "desc": "Label of the button",
-              "examples": [ "Addresses" ]
+              "examples": [ "'Addresses'" ]
             },
             "tip": {
               "type": "String",
               "desc": "Text to be displayed as a tooltip on hover",
-              "examples": [ "Add a contact from the Address Book" ]
+              "examples": [ "'Add a contact from the Address Book'" ]
             },
             "htmlTip": {
               "type": "String",
               "desc": "HTML formatted text to be displayed within a tooltip on hover",
-              "examples": [ "Add a <span class=\"red\">user</span> from the address book" ]
+              "examples": [ "'Add a <span class=\"red\">user</span> from the address book'" ]
             },
             "icon": {
               "type": "String",
               "desc": "Icon of the button",
-              "examples": [ "fas fa-address-book" ]
+              "examples": [ "'fas fa-address-book'" ]
             },
             "key": {
               "type": "Number",
@@ -117,12 +109,12 @@
             "cmd": {
               "type": "String",
               "desc": "Either this or \"handler\" is required. This must be a valid execCommand method according to the designMode API.",
-              "examples": [ "insertHTML", "justifyFull" ]
+              "examples": [ "'insertHTML'", "'justifyFull'" ]
             },
             "param": {
               "type": "String",
               "desc": "Only set a param if using a \"cmd\". This is commonly text or HTML to inject, but is highly dependent upon the specific cmd being called.",
-              "examples": [ "<img src=\"://uploads/001.jpg\" alt=\"nice pic\" />" ]
+              "examples": [ "'<img src=\"://uploads/001.jpg\" alt=\"nice pic\" />'" ]
             },
             "disable": {
               "type": [ "Boolean", "Function" ],
@@ -131,13 +123,13 @@
                 "type": "Boolean",
                 "desc": "If true, the button will be disabled"
               },
-              "examples": [ "!user.active", "() => !checkIfUserIsActive()" ]
+              "examples": [ "true", "() => !checkIfUserIsActive()" ]
             },
             "type": {
-              "type": "String",
+              "type": [ "String", "null" ],
               "desc": "Pass the value \"no-state\" if the button should not have an \"active\" state",
-              "values": [ null, "no-state" ],
-              "examples": [ "no-state" ]
+              "values": [ "null", "'no-state'" ],
+              "examples": [ "'no-state'" ]
             },
             "fixedLabel": {
               "type": "Boolean",
@@ -161,7 +153,7 @@
       "type": "Object",
       "desc": "Object with definitions of fonts",
       "examples": [
-        ":fonts=\"{ arial: 'Arial', arial_black: 'Arial Black', comic_sans: 'Comic Sans MS' }\""
+        "{ arial: 'Arial', arial_black: 'Arial Black', comic_sans: 'Comic Sans MS' }"
       ],
       "category": "toolbar"
     },
@@ -169,14 +161,8 @@
     "toolbar": {
       "type": "Array",
       "desc": "An array of arrays of Objects/Strings that you use to define the construction of the elements and commands available in the toolbar",
-      "default": [
-        [ "left", "center", "right", "justify" ],
-        [ "bold", "italic", "underline", "strike" ],
-        [ "undo", "redo" ]
-      ],
-      "examples": [
-        [ "left", "center", "right", "justify" ]
-      ],
+      "default": "[ [ 'left', 'center', 'right', 'justify' ], [ 'bold', 'italic', 'underline', 'strike' ], [ 'undo', 'redo' ]",
+      "examples": [ "[ 'left', 'center', 'right', 'justify' ]" ],
       "category": "toolbar"
     },
 
@@ -195,16 +181,16 @@
     "toolbar-toggle-color": {
       "type": "String",
       "desc": "Choose the active color (from the Quasar Palette) of toolbar commands button",
-      "default": "primary",
-      "examples": [ "secondary", "blue-3" ],
+      "default": "'primary'",
+      "examples": [ "'secondary'", "'blue-3'" ],
       "category": "toolbar"
     },
 
     "toolbar-bg": {
       "type": "String",
       "desc": "Toolbar background color (from Quasar Palette)",
-      "default": "grey-3",
-      "examples": [ "secondary", "blue-3" ],
+      "default": "'grey-3'",
+      "examples": [ "'secondary'", "'blue-3'" ],
       "category": "toolbar"
     },
 
@@ -229,7 +215,7 @@
     "paragraph-tag": {
       "type": "String",
       "desc": "Paragraph tag to be used",
-      "values": [ "div", "p" ],
+      "values": [ "'div'", "'p'" ],
       "category": "behavior"
     },
 
@@ -237,7 +223,7 @@
       "type": "Object",
       "tsType": "VueStyleObjectProp",
       "desc": "Object with CSS properties and values for styling the container of QEditor",
-      "examples": [ ":content-style=\"{ backgroundColor: '#C0C0C0' }\"" ],
+      "examples": [ "{ backgroundColor: '#C0C0C0' }" ],
       "category": "style"
     },
 
@@ -246,8 +232,8 @@
       "tsType": "VueClassProp",
       "desc": "CSS classes for the input area",
       "examples": [
-        "my-special-class",
-        ":content-class=\"{ 'my-special-class': <condition> }\""
+        "'my-special-class'",
+        "{ 'my-special-class': true }"
       ],
       "category": "style"
     },
@@ -255,7 +241,7 @@
     "placeholder": {
       "type": "String",
       "desc": "Text to display as placeholder",
-      "examples": [ "Type your story here ..." ],
+      "examples": [ "'Type your story here ...'" ],
       "category": "content"
     }
   },
@@ -329,32 +315,38 @@
         "cmd": {
           "type": "String",
           "desc": "Must be a valid execCommand method according to the designMode API",
-          "examples": [ "copy", "cut", "paste" ],
+          "examples": [ "'copy'", "'cut'", "'paste'" ],
           "required": true
         },
         "param": {
           "type": "String",
           "desc": "The argument to pass to the command",
-          "examples": [ "<small>Small Text</small>" ]
+          "examples": [ "'<small>Small Text</small>'" ]
         },
         "update": {
           "type": "Boolean",
           "desc": "Refresh the toolbar",
-          "default": true
+          "default": "true"
         }
-      }
+      },
+      "returns": null
     },
 
     "refreshToolbar": {
-      "desc": "Hide the link editor if visible and force the instance to re-render"
+      "desc": "Hide the link editor if visible and force the instance to re-render",
+      "params": null,
+      "returns": null
     },
 
     "focus": {
-      "desc": "Focus on the contentEditable at saved cursor position"
+      "desc": "Focus on the contentEditable at saved cursor position",
+      "params": null,
+      "returns": null
     },
 
     "getContentEl": {
       "desc": "Retrieve the content of the Editor",
+      "params": null,
       "returns": {
         "type": "Element",
         "desc": "Provides the pure HTML within the editable area"

package/src/components/editor/editor-caret.js

@@ -1,4 +1,4 @@
-import { noop } from '../../utils/event.js'
+import { noop } from '../../utils/event/event.js'
 
 function getBlockElement (el, parent) {
   if (parent && el === parent) {

package/src/components/editor/editor-utils.js

@@ -7,9 +7,9 @@ import QTooltip from '../tooltip/QTooltip.js'
 import QItem from '../item/QItem.js'
 import QItemSection from '../item/QItemSection.js'
 
-import { prevent, stop } from '../../utils/event.js'
-import { hSlot } from '../../utils/private/render.js'
-import { shouldIgnoreKey } from '../../utils/private/key-composition.js'
+import { prevent, stop } from '../../utils/event/event.js'
+import { hSlot } from '../../utils/private.render/render.js'
+import { shouldIgnoreKey } from '../../utils/private.keyboard/key-composition.js'
 
 function run (e, btn, eVm) {
   if (btn.handler) {

package/src/components/expansion-item/QExpansionItem.js

@@ -7,15 +7,15 @@ import QIcon from '../icon/QIcon.js'
 import QSlideTransition from '../slide-transition/QSlideTransition.js'
 import QSeparator from '../separator/QSeparator.js'
 
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useId from '../../composables/use-id.js'
-import { useRouterLinkProps } from '../../composables/private/use-router-link.js'
-import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useId from '../../composables/use-id/use-id.js'
+import { useRouterLinkProps } from '../../composables/private.use-router-link/use-router-link.js'
+import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private.use-model-toggle/use-model-toggle.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { stopAndPrevent } from '../../utils/event.js'
-import { hSlot } from '../../utils/private/render.js'
-import uid from '../../utils/uid.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { stopAndPrevent } from '../../utils/event/event.js'
+import { hSlot } from '../../utils/private.render/render.js'
+import uid from '../../utils/uid/uid.js'
 
 const itemGroups = shallowReactive({})
 const LINK_PROPS = Object.keys(useRouterLinkProps)
@@ -130,7 +130,7 @@ export default createComponent({
 
     const headerSlotScope = computed(() => ({
       expanded: showing.value === true,
-      detailsId: props.targetUid,
+      detailsId: targetUid.value,
       toggle,
       show,
       hide

package/src/components/expansion-item/QExpansionItem.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-model-toggle", "composables/private/use-router-link" ],
+  "mixins": [ "composables/private.use-model-toggle/use-model-toggle", "composables/private.use-router-link/use-router-link" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/expansion-item"
@@ -29,14 +29,14 @@
       "type": [ "String", "Array", "Object" ],
       "tsType": "VueClassProp",
       "desc": "Apply custom class(es) to the expand icon item section",
-      "examples": [ "text-purple" ],
+      "examples": [ "'text-purple'" ],
       "category": "style"
     },
 
     "toggle-aria-label": {
       "type": "String",
       "desc": "aria-label to be used on the expansion toggle element",
-      "examples": [ "Open details" ],
+      "examples": [ "'Open details'" ],
       "category": "accessibility",
       "addedIn": "v2.8.4"
     },
@@ -44,28 +44,28 @@
     "label": {
       "type": "String",
       "desc": "Header label (unless using 'header' slot)",
-      "examples": [ "My expansion item" ],
+      "examples": [ "'My expansion item'" ],
       "category": "content"
     },
 
     "label-lines": {
       "type": [ "Number", "String" ],
       "desc": "Apply ellipsis when there's not enough space to render on the specified number of lines; If more than one line specified, then it will only work on webkit browsers because it uses the '-webkit-line-clamp' CSS property!",
-      "examples": [ "1", "3", ":label-lines=\"2\"" ],
+      "examples": [ "1", "'3'" ],
       "category": "content"
     },
 
     "caption": {
       "type": "String",
       "desc": "Header sub-label (unless using 'header' slot)",
-      "examples": [ "Unread message: 5" ],
+      "examples": [ "'Unread message: 5'" ],
       "category": "content"
     },
 
     "caption-lines": {
       "type": [ "Number", "String" ],
       "desc": "Apply ellipsis when there's not enough space to render on the specified number of lines; If more than one line specified, then it will only work on webkit browsers because it uses the '-webkit-line-clamp' CSS property!",
-      "examples": [ "1", "3", ":caption-lines=\"2\"" ],
+      "examples": [ "1", "'3'" ],
       "category": "content"
     },
 
@@ -80,21 +80,21 @@
     "duration": {
       "type": "Number",
       "desc": "Animation duration (in milliseconds)",
-      "default": 300,
+      "default": "300",
       "category": "behavior"
     },
 
     "header-inset-level": {
       "type": "Number",
       "desc": "Apply an inset to header (unless using 'header' slot); Useful when header avatar/left side is missing but you want to align content with other items that do have a left side, or when you're building a menu",
-      "examples": [ ":header-inset-level=\"1\"" ],
+      "examples": [ "1" ],
       "category": "content"
     },
 
     "content-inset-level": {
       "type": "Number",
       "desc": "Apply an inset to content (changes content padding)",
-      "examples": [ ":content-inset-level=\"1\"" ],
+      "examples": [ "1" ],
       "category": "content"
     },
 
@@ -138,7 +138,7 @@
     "group": {
       "type": "String",
       "desc": "Register expansion item into a group (unique name that must be applied to all expansion items in that group) for coordinated open/close state within the group a.k.a. 'accordion mode'",
-      "examples": [ "my-emails" ],
+      "examples": [ "'my-emails'" ],
       "category": "content|behavior"
     },
 
@@ -153,8 +153,8 @@
       "tsType": "VueStyleProp",
       "desc": "Apply custom style to the header",
       "examples": [
-        "background: '#ff0000'",
-        ":header-style=\"{ backgroundColor: '#ff0000' }\""
+        "'background: #ff0000'",
+        "{ backgroundColor: '#ff0000' }"
       ],
       "category": "style"
     },
@@ -164,8 +164,8 @@
       "tsType": "VueClassProp",
       "desc": "Apply custom class(es) to the header",
       "examples": [
-        "my-custom-class",
-        ":header-class=\"{ 'my-custom-class': someCondition }\""
+        "'my-custom-class'",
+        "{ 'my-custom-class': true }"
       ],
       "category": "style"
     }

package/src/components/fab/QFab.js

@@ -4,12 +4,12 @@ import QBtn from '../btn/QBtn.js'
 import QIcon from '../icon/QIcon.js'
 
 import useFab, { useFabProps } from './use-fab.js'
-import useId from '../../composables/use-id.js'
-import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
+import useId from '../../composables/use-id/use-id.js'
+import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private.use-model-toggle/use-model-toggle.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { hSlot, hMergeSlot } from '../../utils/private/render.js'
-import { fabKey } from '../../utils/private/symbols.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { hSlot, hMergeSlot } from '../../utils/private.render/render.js'
+import { fabKey } from '../../utils/private.symbols/symbols.js'
 
 const directions = [ 'up', 'right', 'down', 'left' ]
 const alignValues = [ 'left', 'center', 'right' ]

package/src/components/fab/QFab.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-model-toggle", "components/fab/use-fab" ],
+  "mixins": [ "composables/private.use-model-toggle/use-model-toggle", "components/fab/use-fab" ],
 
   "props": {
     "model-value": {
@@ -26,16 +26,16 @@
     "direction": {
       "type": "String",
       "desc": "Direction to expand Fab Actions to",
-      "default": "right",
-      "values": [ "up", "right", "down", "left" ],
+      "default": "'right'",
+      "values": [ "'up'", "'right'", "'down'", "'left'" ],
       "category": "behavior"
     },
 
     "vertical-actions-align": {
       "type": "String",
       "desc": "The side of the Fab where Fab Actions will expand (only when direction is 'up' or 'down')",
-      "default": "center",
-      "values": [ "left", "center", "right" ],
+      "default": "'center'",
+      "values": [ "'left'", "'center'", "'right'" ],
       "category": "style|content"
     },
 

package/src/components/fab/QFabAction.js

@@ -5,10 +5,10 @@ import QIcon from '../icon/QIcon.js'
 
 import useFab, { useFabProps } from './use-fab.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { fabKey } from '../../utils/private/symbols.js'
-import { hMergeSlot } from '../../utils/private/render.js'
-import { noop } from '../../utils/event.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { fabKey } from '../../utils/private.symbols/symbols.js'
+import { hMergeSlot } from '../../utils/private.render/render.js'
+import { noop } from '../../utils/event/event.js'
 
 const anchorMap = {
   start: 'self-end',