@ptlm-azulejo/tooltip 1.0.0-alpha.150 → 1.0.0-alpha.152
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 +40 -41
- 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"></html>
|
|
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"></html>
|
|
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"></html>
|
|
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,7 +126,8 @@ 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:
|
|
129
|
+
pointer:
|
|
130
|
+
'[--tooltip-pointer-fill:var(--color-background-accent-inverse)] [--tooltip-pointer-border:transparent]',
|
|
130
131
|
}"
|
|
131
132
|
>
|
|
132
133
|
Trigger
|
|
@@ -139,20 +140,20 @@ When you recolour `content`, set `--tooltip-pointer-fill` / `--tooltip-pointer-b
|
|
|
139
140
|
|
|
140
141
|
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**:
|
|
141
142
|
|
|
142
|
-
| Requirement
|
|
143
|
-
|
|
|
144
|
-
| Name / role
|
|
145
|
-
| Relationship
|
|
146
|
-
| Keyboard
|
|
147
|
-
| Hoverable
|
|
148
|
-
| Persistent
|
|
149
|
-
| Decorative arrow
|
|
150
|
-
| Non-essential only | Do not put critical information only in the tooltip (touch / some AT may miss it)
|
|
143
|
+
| Requirement | Behavior |
|
|
144
|
+
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
|
|
145
|
+
| Name / role | Bubble has `role="tooltip"` and a stable `id` |
|
|
146
|
+
| Relationship | `aria-describedby` is set on the **owning control** — a focusable slotted element if present, otherwise the root (`tabindex="0"`) |
|
|
147
|
+
| Keyboard | Opens on focus; Escape dismisses without moving focus |
|
|
148
|
+
| Hoverable | Gap is sized so the arrow bridges trigger → bubble; hover stays on the root |
|
|
149
|
+
| Persistent | Stays open until blur / mouse leave / Escape |
|
|
150
|
+
| Decorative arrow | `aria-hidden="true"` |
|
|
151
|
+
| Non-essential only | Do not put critical information only in the tooltip (touch / some AT may miss it) |
|
|
151
152
|
|
|
152
153
|
## Slots
|
|
153
154
|
|
|
154
|
-
| Name
|
|
155
|
-
|
|
|
155
|
+
| Name | Description |
|
|
156
|
+
| --------- | --------------------------------------------------------------- |
|
|
156
157
|
| `default` | The tooltip will point to the content of the slot (the trigger) |
|
|
157
158
|
|
|
158
159
|
## Basic usage
|
|
@@ -163,9 +164,7 @@ import { AzTooltip } from '@ptlm-azulejo/tooltip'
|
|
|
163
164
|
</script>
|
|
164
165
|
|
|
165
166
|
<template>
|
|
166
|
-
<AzTooltip id="help-tip" text="Keep the tooltip text concise.">
|
|
167
|
-
Hover me
|
|
168
|
-
</AzTooltip>
|
|
167
|
+
<AzTooltip id="help-tip" text="Keep the tooltip text concise."> Hover me </AzTooltip>
|
|
169
168
|
</template>
|
|
170
169
|
```
|
|
171
170
|
|
|
@@ -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":"AAsWA,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;AAsGD,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;AAqNF,QAAA,MAAM,UAAU;cAjQD,eAAe;YAajB,aAAa;aARZ,OAAO;gBAIJ,OAAO;gBASP,OAAO;QAKf,SAAS;6EA6OhB,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"}
|