@m3e/tooltip 1.1.11 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/README.md +79 -11
  2. package/dist/css-custom-data.json +100 -0
  3. package/dist/custom-elements.json +1495 -186
  4. package/dist/html-custom-data.json +49 -0
  5. package/dist/index.js +872 -207
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.min.js +24 -7
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/src/RichTooltipActionElement.d.ts +21 -0
  10. package/dist/src/RichTooltipActionElement.d.ts.map +1 -0
  11. package/dist/src/RichTooltipElement.d.ts +116 -0
  12. package/dist/src/RichTooltipElement.d.ts.map +1 -0
  13. package/dist/src/RichTooltipPosition.d.ts +3 -0
  14. package/dist/src/RichTooltipPosition.d.ts.map +1 -0
  15. package/dist/src/TooltipElement.d.ts +8 -38
  16. package/dist/src/TooltipElement.d.ts.map +1 -1
  17. package/dist/src/TooltipElementBase.d.ts +69 -0
  18. package/dist/src/TooltipElementBase.d.ts.map +1 -0
  19. package/dist/src/index.d.ts +4 -0
  20. package/dist/src/index.d.ts.map +1 -1
  21. package/package.json +4 -3
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @m3e/tooltip
2
2
 
3
- The `m3e-tooltip` component provides contextual information in response to user interaction, enhancing comprehension and reducing ambiguity. Tooltips are positioned relative to a target element and support configurable delays for show and hide behavior. Use the `for` attribute to designate the element for which to provide a tooltip.
3
+ The `@m3e/tooltip` package provides tooltip and rich‑tooltip components for delivering contextual guidance, from simple hover descriptions to multi‑line, expressive content anchored to a control.
4
4
 
5
5
  > **This package is part of [M3E](https://github.com/matraic/m3e) monorepo**, a unified suite of Material 3 web components. [Explore the docs](https://matraic.github.io/m3e) to see them in action.
6
6
 
@@ -56,6 +56,8 @@ In addition, you must use an [import map](https://developer.mozilla.org/en-US/do
56
56
 
57
57
  ## 🗂️ Elements
58
58
 
59
+ - `m3e-rich-tooltip-action` — An element, nested within a clickable element, used to dismiss a parenting rich tooltip.
60
+ - `m3e-rich-tooltip` — Provides contextual details for a control, such as explaining the value or purpose of a feature.
59
61
  - `m3e-tooltip` — Adds additional context to a button or other UI element.
60
62
 
61
63
  ## 🧪 Examples
@@ -69,27 +71,93 @@ The following example illustrates connecting a tooltip to a button using the `fo
69
71
  <m3e-tooltip for="button">Go Back</m3e-tooltip>
70
72
  ```
71
73
 
74
+ The next example illustrates connecting an interactive rich tooltip to a button using the `for` attribute.
75
+
76
+ ```html
77
+ <m3e-icon-button id="btnSettings">
78
+ <m3e-icon name="settings"></m3e-icon>
79
+ </m3e-icon-button>
80
+ <m3e-rich-tooltip for="btnSettings">
81
+ <span slot="subhead">New settings available</span>
82
+ Now you can adjust the uploaded image quality, and upgrade your available storage space.
83
+ <div slot="actions">
84
+ <m3e-button>
85
+ <m3e-rich-tooltip-action>Learn more</m3e-rich-tooltip-action>
86
+ </m3e-button>
87
+ </div>
88
+ </m3e-rich-tooltip>
89
+ ```
90
+
72
91
  ## 📖 API Reference
73
92
 
93
+ ### 🗂️ m3e-rich-tooltip
94
+
95
+ This section details the attributes, slots and CSS custom properties available for the `m3e-rich-tooltip` component.
96
+
97
+ #### ⚙️ Attributes
98
+
99
+ | Attribute | Type | Default | Description |
100
+ | ------------ | ----------------------------------------------------------------------------------------------------------------- | --------------- | ---------------------------------------------------------------------------- |
101
+ | `disabled` | `boolean` | `false` | Whether the element is disabled. |
102
+ | `for` | `string` | | The identifier of the interactive control to which this element is attached. |
103
+ | `hide-delay` | `number` | `200` | The amount of time, in milliseconds, before hiding the tooltip. |
104
+ | `position` | `"above-after" \| "above-before" \| "below-before" \| "below-after" \| "before" \| "after" \| "above" \| "below"` | `"below-after"` | The position of the tooltip. |
105
+ | `show-delay` | `number` | `0` | The amount of time, in milliseconds, before showing the tooltip. |
106
+
107
+ #### 🧩 Slots
108
+
109
+ | Slot | Description |
110
+ | ----------- | ---------------------------------------------------------------- |
111
+ | _(default)_ | The main supporting text of the tooltip. |
112
+ | `subhead` | Optional subhead text displayed above the supporting content. |
113
+ | `actions` | Optional action elements displayed at the bottom of the tooltip. |
114
+
115
+ #### 🎛️ CSS Custom Properties
116
+
117
+ | Property | Description |
118
+ | ------------------------------------------------ | ---------------------------------------------------------------------- |
119
+ | `--m3e-rich-tooltip-padding-top` | Top padding of the tooltip container. |
120
+ | `--m3e-rich-tooltip-padding-bottom` | Bottom padding of the tooltip container (when no actions are present). |
121
+ | `--m3e-rich-tooltip-padding-inline` | Horizontal padding of the tooltip container. |
122
+ | `--m3e-rich-tooltip-max-width` | Maximum width of the tooltip surface. |
123
+ | `--m3e-rich-tooltip-shape` | Border‑radius of the tooltip container. |
124
+ | `--m3e-rich-tooltip-container-color` | Background color of the tooltip surface. |
125
+ | `--m3e-rich-tooltip-subhead-color` | Color of the subhead text. |
126
+ | `--m3e-rich-tooltip-subhead-font-size` | Font size of the subhead text. |
127
+ | `--m3e-rich-tooltip-subhead-font-weight` | Font weight of the subhead text. |
128
+ | `--m3e-rich-tooltip-subhead-line-height` | Line height of the subhead text. |
129
+ | `--m3e-rich-tooltip-subhead-tracking` | Letter‑spacing of the subhead text. |
130
+ | `--m3e-rich-tooltip-subhead-bottom-space` | Space below the subhead before the supporting text. |
131
+ | `--m3e-rich-tooltip-supporting-text-color` | Color of the supporting text. |
132
+ | `--m3e-rich-tooltip-supporting-text-font-size` | Font size of the supporting text. |
133
+ | `--m3e-rich-tooltip-supporting-text-font-weight` | Font weight of the supporting text. |
134
+ | `--m3e-rich-tooltip-supporting-text-line-height` | Line height of the supporting text. |
135
+ | `--m3e-rich-tooltip-supporting-text-tracking` | Letter‑spacing of the supporting text. |
136
+ | `--m3e-rich-tooltip-actions-padding-inline` | Horizontal padding applied to the actions slot area. |
137
+ | `--m3e-rich-tooltip-actions-top-space` | Space above the actions slot. |
138
+ | `--m3e-rich-tooltip-actions-bottom-space` | Space below the actions slot. |
139
+
140
+ ### 🗂️ m3e-tooltip
141
+
74
142
  This section details the attributes, slots and CSS custom properties available for the `m3e-tooltip` component.
75
143
 
76
- ### ⚙️ Attributes
144
+ #### ⚙️ Attributes
77
145
 
78
- | Attribute | Type | Default | Description |
79
- | ------------ | --------- | ------- | ---------------------------------------------------------------------------- |
80
- | `disabled` | `boolean` | `false` | Whether the element is disabled. |
81
- | `for` | `string` | | The identifier of the interactive control to which this element is attached. |
82
- | `hide-delay` | `number` | `200` | The amount of time, in milliseconds, before hiding the tooltip. |
83
- | `position` | `string` | `"top"` | The position of the tooltip. |
84
- | `show-delay` | `number` | `0` | The amount of time, in milliseconds, before showing the tooltip. |
146
+ | Attribute | Type | Default | Description |
147
+ | ------------ | ------------------------------------------- | --------- | ---------------------------------------------------------------------------- |
148
+ | `disabled` | `boolean` | `false` | Whether the element is disabled. |
149
+ | `for` | `string` | | The identifier of the interactive control to which this element is attached. |
150
+ | `hide-delay` | `number` | `200` | The amount of time, in milliseconds, before hiding the tooltip. |
151
+ | `position` | `"before" \| "after" \| "above" \| "below"` | `"below"` | The position of the tooltip. |
152
+ | `show-delay` | `number` | `0` | The amount of time, in milliseconds, before showing the tooltip. |
85
153
 
86
- ### 🧩 Slots
154
+ #### 🧩 Slots
87
155
 
88
156
  | Slot | Description |
89
157
  | ----------- | ----------------------------------- |
90
158
  | _(default)_ | Renders the content of the tooltip. |
91
159
 
92
- ### 🎛️ CSS Custom Properties
160
+ #### 🎛️ CSS Custom Properties
93
161
 
94
162
  | Property | Description |
95
163
  | ------------------------------------------- | ------------------------------------------ |
package/dist/css-custom-data.json CHANGED
@@ -2,6 +2,106 @@
2
2
  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/main/docs/customData.schema.json",
3
3
  "version": 1.1,
4
4
  "properties": [
5
+ {
6
+ "name": "--m3e-rich-tooltip-padding-top",
7
+ "description": "Top padding of the tooltip container.",
8
+ "values": []
9
+ },
10
+ {
11
+ "name": "--m3e-rich-tooltip-padding-bottom",
12
+ "description": "Bottom padding of the tooltip container (when no actions are present).",
13
+ "values": []
14
+ },
15
+ {
16
+ "name": "--m3e-rich-tooltip-padding-inline",
17
+ "description": "Horizontal padding of the tooltip container.",
18
+ "values": []
19
+ },
20
+ {
21
+ "name": "--m3e-rich-tooltip-max-width",
22
+ "description": "Maximum width of the tooltip surface.",
23
+ "values": []
24
+ },
25
+ {
26
+ "name": "--m3e-rich-tooltip-shape",
27
+ "description": "Border‑radius of the tooltip container.",
28
+ "values": []
29
+ },
30
+ {
31
+ "name": "--m3e-rich-tooltip-container-color",
32
+ "description": "Background color of the tooltip surface.",
33
+ "values": []
34
+ },
35
+ {
36
+ "name": "--m3e-rich-tooltip-subhead-color",
37
+ "description": "Color of the subhead text.",
38
+ "values": []
39
+ },
40
+ {
41
+ "name": "--m3e-rich-tooltip-subhead-font-size",
42
+ "description": "Font size of the subhead text.",
43
+ "values": []
44
+ },
45
+ {
46
+ "name": "--m3e-rich-tooltip-subhead-font-weight",
47
+ "description": "Font weight of the subhead text.",
48
+ "values": []
49
+ },
50
+ {
51
+ "name": "--m3e-rich-tooltip-subhead-line-height",
52
+ "description": "Line height of the subhead text.",
53
+ "values": []
54
+ },
55
+ {
56
+ "name": "--m3e-rich-tooltip-subhead-tracking",
57
+ "description": "Letter‑spacing of the subhead text.",
58
+ "values": []
59
+ },
60
+ {
61
+ "name": "--m3e-rich-tooltip-subhead-bottom-space",
62
+ "description": "Space below the subhead before the supporting text.",
63
+ "values": []
64
+ },
65
+ {
66
+ "name": "--m3e-rich-tooltip-supporting-text-color",
67
+ "description": "Color of the supporting text.",
68
+ "values": []
69
+ },
70
+ {
71
+ "name": "--m3e-rich-tooltip-supporting-text-font-size",
72
+ "description": "Font size of the supporting text.",
73
+ "values": []
74
+ },
75
+ {
76
+ "name": "--m3e-rich-tooltip-supporting-text-font-weight",
77
+ "description": "Font weight of the supporting text.",
78
+ "values": []
79
+ },
80
+ {
81
+ "name": "--m3e-rich-tooltip-supporting-text-line-height",
82
+ "description": "Line height of the supporting text.",
83
+ "values": []
84
+ },
85
+ {
86
+ "name": "--m3e-rich-tooltip-supporting-text-tracking",
87
+ "description": "Letter‑spacing of the supporting text.",
88
+ "values": []
89
+ },
90
+ {
91
+ "name": "--m3e-rich-tooltip-actions-padding-inline",
92
+ "description": "Horizontal padding applied to the actions slot area.",
93
+ "values": []
94
+ },
95
+ {
96
+ "name": "--m3e-rich-tooltip-actions-top-space",
97
+ "description": "Space above the actions slot.",
98
+ "values": []
99
+ },
100
+ {
101
+ "name": "--m3e-rich-tooltip-actions-bottom-space",
102
+ "description": "Space below the actions slot.",
103
+ "values": []
104
+ },
5
105
  {
6
106
  "name": "--m3e-tooltip-padding",
7
107
  "description": "Internal spacing of the tooltip container.",