feat(v11): TooltipDefinition

In v11 the definintion tooltip uses the `Popover` component internally. While the component is called `DefinitionTooltip` in the reference implementation, it is not renamed at this point.

- rename `tooltipText` to `definition`
- rename `tooltip` slot to `definition`
- remove `direction` (see `align`)
- use `align` values from `Popover` and set to `bottom-left` as default instead of `center`

docs/src/COMPONENT_API.json

@@ -14184,9 +14184,9 @@
       "filePath": "src/TooltipDefinition/TooltipDefinition.svelte",
       "props": [
         {
-          "name": "tooltipText",
+          "name": "definition",
           "kind": "let",
-          "description": "Specify the tooltip text",
+          "description": "Specify the term definition.",
           "type": "string",
           "value": "\"\"",
           "isFunction": false,
@@ -14211,20 +14211,8 @@
           "name": "align",
           "kind": "let",
           "description": "Set the alignment of the tooltip relative to the icon",
-          "type": "\"start\" | \"center\" | \"end\"",
-          "value": "\"center\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "direction",
-          "kind": "let",
-          "description": "Set the direction of the tooltip relative to the icon",
-          "type": "\"top\" | \"bottom\"",
-          "value": "\"bottom\"",
+          "type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"",
+          "value": "\"bottom-left\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -14260,9 +14248,9 @@
       "slots": [
         { "name": "__default__", "default": true, "slot_props": "{}" },
         {
-          "name": "tooltip",
+          "name": "definition",
           "default": false,
-          "fallback": "{tooltipText}",
+          "fallback": "{definition}",
           "slot_props": "{}"
         }
       ],
@@ -14275,8 +14263,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "button" },
         { "type": "forwarded", "name": "focus", "element": "button" }
       ],
-      "typedefs": [],
-      "rest_props": { "type": "Element", "name": "span" }
+      "typedefs": []
     },
     {
       "moduleName": "TooltipFooter",

docs/src/pages/components/TooltipDefinition.svx

@@ -5,25 +5,25 @@
 
 ## Default
 
-<TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
+<TooltipDefinition definition="IBM Corporate Headquarters is based in Armonk, New York.">
   Armonk
 </TooltipDefinition>
 
-## Custom tooltip direction and alignment
+## Custom tooltip alignment
 
-Customize the tooltip menu direction and alignment through the `direction` and `align` props.
+Customize the tooltip alignment through the `align` prop.
 
-By default, `direction` is `"bottom"` and `align` is `"center"`.
+By default, `align` is `"bottom-left"`.
 
-<TooltipDefinition direction="top" align="start" tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
+<TooltipDefinition align="top" definition="IBM Corporate Headquarters is based in Armonk, New York.">
   Armonk
 </TooltipDefinition>
 
-## Custom tooltip slot
+## Custom definition slot
 
 <TooltipDefinition>
   Armonk
-  <span slot="tooltip" style="color: red">
+  <span slot="definition" style="color: red">
     IBM Corporate Headquarters is based in Armonk, New York.
   </span>
 </TooltipDefinition>