@ptlm-azulejo/tooltip 1.0.0-alpha.151 → 1.0.0-alpha.154
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.
- package/README.md +41 -40
- package/dist/src/index.vue.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -35,10 +35,10 @@ CSS variables at runtime. Those tokens come from `@ptlm-azulejo/themes`, and **t
|
|
|
35
35
|
brand is selected by a class on your app's `<html>` element**, so switching brand
|
|
36
36
|
never touches component code.
|
|
37
37
|
|
|
38
|
-
| Project
|
|
39
|
-
|
|
|
40
|
-
| Leroy Merlin | `@ptlm-azulejo/themes/presets/leroy-merlin.css` | `preset-lm`
|
|
41
|
-
| Adeo
|
|
38
|
+
| Project | Preset stylesheet | Root class | Typeface | Font package |
|
|
39
|
+
| --- | --- | --- | --- | --- |
|
|
40
|
+
| Leroy Merlin | `@ptlm-azulejo/themes/presets/leroy-merlin.css` | `preset-lm` | LeroyMerlinSans | `@ptlm-azulejo/fonts-leroy-merlin` |
|
|
41
|
+
| Adeo | `@ptlm-azulejo/themes/presets/adeo.css` | `preset-adeo` | Roboto | `@ptlm-azulejo/fonts-adeo` |
|
|
42
42
|
|
|
43
43
|
**Leroy Merlin projects**
|
|
44
44
|
|
|
@@ -49,7 +49,7 @@ import '@ptlm-azulejo/tooltip/style.css'
|
|
|
49
49
|
```
|
|
50
50
|
|
|
51
51
|
```html
|
|
52
|
-
<html lang="pt" class="preset-lm"
|
|
52
|
+
<html lang="pt" class="preset-lm">
|
|
53
53
|
```
|
|
54
54
|
|
|
55
55
|
**Adeo projects**
|
|
@@ -61,7 +61,7 @@ import '@ptlm-azulejo/tooltip/style.css'
|
|
|
61
61
|
```
|
|
62
62
|
|
|
63
63
|
```html
|
|
64
|
-
<html lang="pt" class="preset-adeo"
|
|
64
|
+
<html lang="pt" class="preset-adeo">
|
|
65
65
|
```
|
|
66
66
|
|
|
67
67
|
> The preset class is what resolves the brand at runtime. Without it — even with
|
|
@@ -75,12 +75,12 @@ Add `data-theme` alongside the brand class to pin the color scheme. Leave it off
|
|
|
75
75
|
and the preset follows the OS `prefers-color-scheme`:
|
|
76
76
|
|
|
77
77
|
```html
|
|
78
|
-
<html lang="pt" class="preset-lm" data-theme="dark"
|
|
78
|
+
<html lang="pt" class="preset-lm" data-theme="dark">
|
|
79
79
|
```
|
|
80
80
|
|
|
81
81
|
### Why the font package is separate
|
|
82
82
|
|
|
83
|
-
The preset only
|
|
83
|
+
The preset only *names* its typeface in `--font-family` and ships no font files.
|
|
84
84
|
[Loading them is your app's job](../themes/README.md#fonts), as with upstream
|
|
85
85
|
Mozaic, so you keep control of hosting, subsetting and preload. Without the
|
|
86
86
|
matching font package, `font-sans` falls back to a generic sans-serif. A
|
|
@@ -89,32 +89,32 @@ only the active brand's file is ever downloaded.
|
|
|
89
89
|
|
|
90
90
|
### Custom property
|
|
91
91
|
|
|
92
|
-
| Name
|
|
93
|
-
|
|
|
94
|
-
| `--tooltip-z-index` | `number` | `1`
|
|
92
|
+
| Name | Type | Default | Description |
|
|
93
|
+
| --- | --- | --- | --- |
|
|
94
|
+
| `--tooltip-z-index` | `number` | `1` | Customise the z-index of the tooltip bubble |
|
|
95
95
|
|
|
96
96
|
## Props
|
|
97
97
|
|
|
98
|
-
| Name
|
|
99
|
-
|
|
|
100
|
-
| `id`
|
|
101
|
-
| `text`
|
|
102
|
-
| `position`
|
|
103
|
-
| `pointer`
|
|
104
|
-
| `helpCursor` | `boolean`
|
|
105
|
-
| `radius`
|
|
106
|
-
| `standalone` | `boolean`
|
|
107
|
-
| `ui`
|
|
98
|
+
| Name | Type | Default | Description |
|
|
99
|
+
| --- | --- | --- | --- |
|
|
100
|
+
| `id` | `string` | — | Unique id for `aria-describedby` / content `id` (required) |
|
|
101
|
+
| `text` | `string` | — | Tooltip content; keep concise (required) |
|
|
102
|
+
| `position` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'` | Position relative to the trigger |
|
|
103
|
+
| `pointer` | `boolean` | `true` | Show the origin arrow pointing at the trigger |
|
|
104
|
+
| `helpCursor` | `boolean` | `false` | Show the help cursor (`?`) on hover / focus |
|
|
105
|
+
| `radius` | `'none' \| 'sm' \| 'md' \| 'lg'` | `'md'` | Bubble border radius (`none` or `--border-radius-s/m/l`) |
|
|
106
|
+
| `standalone` | `boolean` | `false` | Always visible, in normal flow (no hover gate) |
|
|
107
|
+
| `ui` | `TooltipUi` | `{}` | Per-part Tailwind class overrides |
|
|
108
108
|
|
|
109
109
|
### `:ui` keys
|
|
110
110
|
|
|
111
111
|
Pass Tailwind class strings; they **merge** with defaults via `cn()` (conflicting utilities win).
|
|
112
112
|
|
|
113
|
-
| Key
|
|
114
|
-
|
|
|
115
|
-
| `root`
|
|
116
|
-
| `content` | The bubble (`role="tooltip"`)
|
|
117
|
-
| `text`
|
|
113
|
+
| Key | Targets | `data-testid` |
|
|
114
|
+
| --- | --- | --- |
|
|
115
|
+
| `root` | Wrapper around the trigger and bubble | `tooltip` |
|
|
116
|
+
| `content` | The bubble (`role="tooltip"`) | `tooltip-content` |
|
|
117
|
+
| `text` | The label inside the bubble | `tooltip-text` |
|
|
118
118
|
| `pointer` | Origin arrow wrapper (masked triangle on the bubble edge) | `tooltip-pointer` |
|
|
119
119
|
|
|
120
120
|
```vue
|
|
@@ -126,8 +126,7 @@ Pass Tailwind class strings; they **merge** with defaults via `cn()` (conflictin
|
|
|
126
126
|
root: 'shadow-lg',
|
|
127
127
|
content: 'bg-[color:var(--color-background-accent-inverse)] border-transparent',
|
|
128
128
|
text: 'uppercase tracking-wide',
|
|
129
|
-
pointer:
|
|
130
|
-
'[--tooltip-pointer-fill:var(--color-background-accent-inverse)] [--tooltip-pointer-border:transparent]',
|
|
129
|
+
pointer: '[--tooltip-pointer-fill:var(--color-background-accent-inverse)] [--tooltip-pointer-border:transparent]',
|
|
131
130
|
}"
|
|
132
131
|
>
|
|
133
132
|
Trigger
|
|
@@ -140,20 +139,20 @@ When you recolour `content`, set `--tooltip-pointer-fill` / `--tooltip-pointer-b
|
|
|
140
139
|
|
|
141
140
|
Aligned with the [ARIA tooltip pattern](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tooltip_role) and WCAG **1.4.13 Content on Hover or Focus**:
|
|
142
141
|
|
|
143
|
-
| Requirement
|
|
144
|
-
|
|
|
145
|
-
| Name / role
|
|
146
|
-
| Relationship
|
|
147
|
-
| Keyboard
|
|
148
|
-
| Hoverable
|
|
149
|
-
| Persistent
|
|
150
|
-
| Decorative arrow
|
|
151
|
-
| Non-essential only | Do not put critical information only in the tooltip (touch / some AT may miss it)
|
|
142
|
+
| Requirement | Behavior |
|
|
143
|
+
| --- | --- |
|
|
144
|
+
| Name / role | Bubble has `role="tooltip"` and a stable `id` |
|
|
145
|
+
| Relationship | `aria-describedby` is set on the **owning control** — a focusable slotted element if present, otherwise the root (`tabindex="0"`) |
|
|
146
|
+
| Keyboard | Opens on focus; Escape dismisses without moving focus |
|
|
147
|
+
| Hoverable | Gap is sized so the arrow bridges trigger → bubble; hover stays on the root |
|
|
148
|
+
| Persistent | Stays open until blur / mouse leave / Escape |
|
|
149
|
+
| Decorative arrow | `aria-hidden="true"` |
|
|
150
|
+
| Non-essential only | Do not put critical information only in the tooltip (touch / some AT may miss it) |
|
|
152
151
|
|
|
153
152
|
## Slots
|
|
154
153
|
|
|
155
|
-
| Name
|
|
156
|
-
|
|
|
154
|
+
| Name | Description |
|
|
155
|
+
| --- | --- |
|
|
157
156
|
| `default` | The tooltip will point to the content of the slot (the trigger) |
|
|
158
157
|
|
|
159
158
|
## Basic usage
|
|
@@ -164,7 +163,9 @@ import { AzTooltip } from '@ptlm-azulejo/tooltip'
|
|
|
164
163
|
</script>
|
|
165
164
|
|
|
166
165
|
<template>
|
|
167
|
-
<AzTooltip id="help-tip" text="Keep the tooltip text concise.">
|
|
166
|
+
<AzTooltip id="help-tip" text="Keep the tooltip text concise.">
|
|
167
|
+
Hover me
|
|
168
|
+
</AzTooltip>
|
|
168
169
|
</template>
|
|
169
170
|
```
|
|
170
171
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../src/index.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../src/index.vue"],"names":[],"mappings":"AA+XA,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAEjE,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEvD,MAAM,WAAW,SAAS;IACxB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAoHD,KAAK,WAAW,GAAG;IACf;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAA;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,EAAE,CAAC,EAAE,SAAS,CAAA;CACf,CAAC;AAaJ,KAAK,WAAW,GAAG;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,OAAO,CAAA;CACxB,CAAC;AA2NF,QAAA,MAAM,UAAU;cAvQD,eAAe;YAajB,aAAa;aARZ,OAAO;gBAIJ,OAAO;gBASP,OAAO;QAKf,SAAS;6EAmPhB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
|