@telefonica/mistica 16.66.0 → 16.68.0

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 (221) hide show
  1. package/README.md +21 -5
  2. package/css/mistica.css +1 -1
  3. package/dist/accordion.css-mistica.js +6 -6
  4. package/dist/align.css-mistica.js +1 -1
  5. package/dist/autocomplete.css-mistica.js +1 -1
  6. package/dist/avatar.css-mistica.js +1 -1
  7. package/dist/badge.css-mistica.js +1 -1
  8. package/dist/box.css-mistica.js +13 -13
  9. package/dist/boxed.css-mistica.js +24 -24
  10. package/dist/button-group.css-mistica.js +1 -1
  11. package/dist/button-layout.css-mistica.js +14 -14
  12. package/dist/button.css-mistica.js +55 -46
  13. package/dist/button.css.d.ts +3 -0
  14. package/dist/button.js +133 -124
  15. package/dist/callout.css-mistica.js +11 -11
  16. package/dist/card-internal.css-mistica.js +15 -15
  17. package/dist/carousel.css-mistica.js +8 -8
  18. package/dist/checkbox.css-mistica.js +11 -11
  19. package/dist/chip.css-mistica.js +15 -15
  20. package/dist/circle.css-mistica.js +1 -1
  21. package/dist/community/advanced-data-card.css-mistica.js +6 -6
  22. package/dist/community/ai-card.css-mistica.js +2 -2
  23. package/dist/community/blocks.css-mistica.js +1 -1
  24. package/dist/community/cyber/example-component.css-mistica.js +1 -1
  25. package/dist/community/example-component.css-mistica.js +1 -1
  26. package/dist/community/skins/cyber-skin.js +9 -8
  27. package/dist/counter.css-mistica.js +1 -1
  28. package/dist/cover-hero.css-mistica.js +2 -2
  29. package/dist/credit-card-number-field.css-mistica.js +3 -3
  30. package/dist/date-field.css-mistica.js +1 -1
  31. package/dist/date-time-picker.css-mistica.js +1 -1
  32. package/dist/dialog.css-mistica.js +4 -4
  33. package/dist/divider.css-mistica.js +5 -5
  34. package/dist/double-field.css-mistica.js +2 -2
  35. package/dist/drawer.css-mistica.js +1 -1
  36. package/dist/empty-state-card.css-mistica.js +1 -1
  37. package/dist/empty-state.css-mistica.js +5 -5
  38. package/dist/fade-in.css-mistica.js +1 -1
  39. package/dist/feedback.css-mistica.js +1 -1
  40. package/dist/file-upload.css-mistica.js +7 -7
  41. package/dist/fixed-footer-layout.css-mistica.js +2 -2
  42. package/dist/focus-trap.d.ts +3 -1
  43. package/dist/focus-trap.js +6 -5
  44. package/dist/form.css-mistica.js +1 -1
  45. package/dist/grid-layout.css-mistica.js +3 -3
  46. package/dist/grid.css-mistica.js +120 -120
  47. package/dist/header.css-mistica.js +1 -1
  48. package/dist/hero.css-mistica.js +2 -2
  49. package/dist/horizontal-scroll.css-mistica.js +1 -1
  50. package/dist/icon-button.css-mistica.js +53 -53
  51. package/dist/icons/icon-chevron.css-mistica.js +2 -2
  52. package/dist/icons/icon-error.css-mistica.js +1 -1
  53. package/dist/image.css-mistica.js +2 -2
  54. package/dist/inline.css-mistica.js +9 -9
  55. package/dist/list.css-mistica.js +1 -1
  56. package/dist/loading-bar.css-mistica.js +1 -1
  57. package/dist/loading-screen.css-mistica.js +4 -4
  58. package/dist/logo.css-mistica.js +5 -5
  59. package/dist/menu.css-mistica.js +13 -13
  60. package/dist/menu.js +27 -27
  61. package/dist/mosaic.css-mistica.js +1 -1
  62. package/dist/navigation-bar.css-mistica.js +18 -18
  63. package/dist/navigation-breadcrumbs.css-mistica.js +1 -1
  64. package/dist/package-version.js +1 -1
  65. package/dist/pin-field.css-mistica.js +1 -1
  66. package/dist/popover.css-mistica.js +1 -1
  67. package/dist/progress-bar.css-mistica.js +6 -6
  68. package/dist/radio-button.css-mistica.js +19 -19
  69. package/dist/rating.css-mistica.js +2 -2
  70. package/dist/responsive-layout.css-mistica.js +6 -6
  71. package/dist/screen-reader-only.css-mistica.js +1 -1
  72. package/dist/select.css-mistica.js +15 -15
  73. package/dist/sheet-action-row.css-mistica.js +1 -1
  74. package/dist/sheet-common.css-mistica.js +1 -1
  75. package/dist/sheet-info.css-mistica.js +1 -1
  76. package/dist/skeletons.css-mistica.js +6 -6
  77. package/dist/skins/skin-contract.css-mistica.js +684 -684
  78. package/dist/skip-link.css-mistica.js +1 -1
  79. package/dist/slider.css-mistica.js +18 -18
  80. package/dist/snackbar.css-mistica.js +4 -4
  81. package/dist/spinner.css-mistica.js +1 -1
  82. package/dist/square.css-mistica.js +1 -1
  83. package/dist/stack.css-mistica.js +5 -5
  84. package/dist/stacking-group.css-mistica.js +1 -1
  85. package/dist/stepper.css-mistica.js +2 -2
  86. package/dist/switch-component.css-mistica.js +35 -35
  87. package/dist/table.css-mistica.js +9 -9
  88. package/dist/tabs.css-mistica.js +17 -17
  89. package/dist/tag.css-mistica.js +1 -1
  90. package/dist/text-field-base.css-mistica.js +15 -15
  91. package/dist/text-field-components.css-mistica.js +3 -3
  92. package/dist/text-link.css-mistica.js +6 -6
  93. package/dist/text.css-mistica.js +6 -6
  94. package/dist/theme-context.css-mistica.js +1 -1
  95. package/dist/timeline.css-mistica.js +9 -9
  96. package/dist/timer.css-mistica.js +6 -6
  97. package/dist/tooltip.css-mistica.js +1 -1
  98. package/dist/touchable.css-mistica.js +1 -1
  99. package/dist/utils/aspect-ratio-support.css-mistica.js +2 -2
  100. package/dist/video.css-mistica.js +1 -1
  101. package/dist/video.d.ts +2 -0
  102. package/dist/video.js +40 -32
  103. package/dist/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  104. package/dist-es/accordion.css-mistica.js +6 -6
  105. package/dist-es/align.css-mistica.js +1 -1
  106. package/dist-es/autocomplete.css-mistica.js +1 -1
  107. package/dist-es/avatar.css-mistica.js +1 -1
  108. package/dist-es/badge.css-mistica.js +1 -1
  109. package/dist-es/box.css-mistica.js +13 -13
  110. package/dist-es/boxed.css-mistica.js +23 -23
  111. package/dist-es/button-group.css-mistica.js +1 -1
  112. package/dist-es/button-layout.css-mistica.js +14 -14
  113. package/dist-es/button.css-mistica.js +35 -35
  114. package/dist-es/button.js +168 -159
  115. package/dist-es/callout.css-mistica.js +11 -11
  116. package/dist-es/card-internal.css-mistica.js +15 -15
  117. package/dist-es/carousel.css-mistica.js +8 -8
  118. package/dist-es/checkbox.css-mistica.js +11 -11
  119. package/dist-es/chip.css-mistica.js +15 -15
  120. package/dist-es/circle.css-mistica.js +1 -1
  121. package/dist-es/community/advanced-data-card.css-mistica.js +6 -6
  122. package/dist-es/community/ai-card.css-mistica.js +2 -2
  123. package/dist-es/community/blocks.css-mistica.js +1 -1
  124. package/dist-es/community/cyber/example-component.css-mistica.js +1 -1
  125. package/dist-es/community/example-component.css-mistica.js +1 -1
  126. package/dist-es/community/skins/cyber-skin.js +9 -8
  127. package/dist-es/counter.css-mistica.js +1 -1
  128. package/dist-es/cover-hero.css-mistica.js +2 -2
  129. package/dist-es/credit-card-number-field.css-mistica.js +3 -3
  130. package/dist-es/date-field.css-mistica.js +1 -1
  131. package/dist-es/date-time-picker.css-mistica.js +1 -1
  132. package/dist-es/dialog.css-mistica.js +4 -4
  133. package/dist-es/divider.css-mistica.js +5 -5
  134. package/dist-es/double-field.css-mistica.js +2 -2
  135. package/dist-es/drawer.css-mistica.js +1 -1
  136. package/dist-es/empty-state-card.css-mistica.js +1 -1
  137. package/dist-es/empty-state.css-mistica.js +5 -5
  138. package/dist-es/fade-in.css-mistica.js +1 -1
  139. package/dist-es/feedback.css-mistica.js +1 -1
  140. package/dist-es/file-upload.css-mistica.js +7 -7
  141. package/dist-es/fixed-footer-layout.css-mistica.js +2 -2
  142. package/dist-es/focus-trap.js +8 -7
  143. package/dist-es/form.css-mistica.js +1 -1
  144. package/dist-es/grid-layout.css-mistica.js +3 -3
  145. package/dist-es/grid.css-mistica.js +120 -120
  146. package/dist-es/header.css-mistica.js +1 -1
  147. package/dist-es/hero.css-mistica.js +2 -2
  148. package/dist-es/horizontal-scroll.css-mistica.js +1 -1
  149. package/dist-es/icon-button.css-mistica.js +53 -53
  150. package/dist-es/icons/icon-chevron.css-mistica.js +2 -2
  151. package/dist-es/icons/icon-error.css-mistica.js +1 -1
  152. package/dist-es/image.css-mistica.js +2 -2
  153. package/dist-es/inline.css-mistica.js +9 -9
  154. package/dist-es/list.css-mistica.js +1 -1
  155. package/dist-es/loading-bar.css-mistica.js +1 -1
  156. package/dist-es/loading-screen.css-mistica.js +4 -4
  157. package/dist-es/logo.css-mistica.js +5 -5
  158. package/dist-es/menu.css-mistica.js +13 -13
  159. package/dist-es/menu.js +35 -35
  160. package/dist-es/mosaic.css-mistica.js +1 -1
  161. package/dist-es/navigation-bar.css-mistica.js +18 -18
  162. package/dist-es/navigation-breadcrumbs.css-mistica.js +1 -1
  163. package/dist-es/package-version.js +1 -1
  164. package/dist-es/pin-field.css-mistica.js +1 -1
  165. package/dist-es/popover.css-mistica.js +1 -1
  166. package/dist-es/progress-bar.css-mistica.js +6 -6
  167. package/dist-es/radio-button.css-mistica.js +19 -19
  168. package/dist-es/rating.css-mistica.js +2 -2
  169. package/dist-es/responsive-layout.css-mistica.js +6 -6
  170. package/dist-es/screen-reader-only.css-mistica.js +1 -1
  171. package/dist-es/select.css-mistica.js +15 -15
  172. package/dist-es/sheet-action-row.css-mistica.js +1 -1
  173. package/dist-es/sheet-common.css-mistica.js +1 -1
  174. package/dist-es/sheet-info.css-mistica.js +1 -1
  175. package/dist-es/skeletons.css-mistica.js +6 -6
  176. package/dist-es/skins/skin-contract.css-mistica.js +684 -684
  177. package/dist-es/skip-link.css-mistica.js +1 -1
  178. package/dist-es/slider.css-mistica.js +18 -18
  179. package/dist-es/snackbar.css-mistica.js +4 -4
  180. package/dist-es/spinner.css-mistica.js +1 -1
  181. package/dist-es/square.css-mistica.js +1 -1
  182. package/dist-es/stack.css-mistica.js +5 -5
  183. package/dist-es/stacking-group.css-mistica.js +1 -1
  184. package/dist-es/stepper.css-mistica.js +2 -2
  185. package/dist-es/style.css +1 -1
  186. package/dist-es/switch-component.css-mistica.js +35 -35
  187. package/dist-es/table.css-mistica.js +9 -9
  188. package/dist-es/tabs.css-mistica.js +17 -17
  189. package/dist-es/tag.css-mistica.js +1 -1
  190. package/dist-es/text-field-base.css-mistica.js +15 -15
  191. package/dist-es/text-field-components.css-mistica.js +3 -3
  192. package/dist-es/text-link.css-mistica.js +6 -6
  193. package/dist-es/text.css-mistica.js +6 -6
  194. package/dist-es/theme-context.css-mistica.js +1 -1
  195. package/dist-es/timeline.css-mistica.js +9 -9
  196. package/dist-es/timer.css-mistica.js +6 -6
  197. package/dist-es/tooltip.css-mistica.js +1 -1
  198. package/dist-es/touchable.css-mistica.js +1 -1
  199. package/dist-es/utils/aspect-ratio-support.css-mistica.js +2 -2
  200. package/dist-es/video.css-mistica.js +1 -1
  201. package/dist-es/video.js +53 -45
  202. package/dist-es/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js +1 -1
  203. package/doc/llms/agents/figma-verifier.md +49 -0
  204. package/doc/{figma-mcp.md → llms/figma-mcp.md} +34 -20
  205. package/doc/{llms.md → llms/llms.md} +1 -1
  206. package/doc/patterns.md +2 -2
  207. package/package.json +1 -1
  208. package/src/button.css.ts +133 -401
  209. package/src/button.tsx +80 -60
  210. package/src/community/__screenshot_tests__/advanced-data-card-screenshot-test.tsx +5 -5
  211. package/src/community/__screenshot_tests__/blocks-screenshot-test.tsx +6 -6
  212. package/src/community/__stories__/advanced-data-card-carousel-story.tsx +1 -1
  213. package/src/community/__stories__/advanced-data-card-story.tsx +1 -1
  214. package/src/community/__stories__/ai-card-story.tsx +1 -1
  215. package/src/community/__stories__/blocks-story.tsx +1 -1
  216. package/src/community/skins/cyber-skin.tsx +8 -8
  217. package/src/focus-trap.tsx +10 -2
  218. package/src/menu.tsx +0 -1
  219. package/src/package-version.tsx +1 -1
  220. package/src/video.tsx +4 -0
  221. package/src/community/__stories__/example-component-story.tsx +0 -15
package/README.md CHANGED
@@ -107,8 +107,9 @@ Start prototyping interfaces with Mistica components in the
107
107
 
108
108
  ## AI / LLM Integration
109
109
 
110
- Mistica ships documentation optimised for AI coding assistants. The package includes a `doc/llms.md` file with
111
- concise component references, critical rules, and links to detailed documentation — all inside `node_modules`.
110
+ Mistica ships documentation optimised for AI coding assistants. The package includes a `doc/llms/llms.md` file
111
+ with concise component references, critical rules, and links to detailed documentation — all inside
112
+ `node_modules`.
112
113
 
113
114
  ### Using the skill
114
115
 
@@ -122,16 +123,31 @@ npx skills add telefonica/mistica-web
122
123
  Once installed, your agent should load the skill whenever you ask it to build Mistica UIs and will consult the
123
124
  documentation automatically.
124
125
 
126
+ Some example prompts that will trigger the skill:
127
+
128
+ - "Implement a Netflix-like landing page using Mistica"
129
+ - "Implement this design https://www.figma.com/design/ct7WJR90qZTxLnmJdR5C4B/Ai-SDLC-Metrics?node-id=1-2&m=dev
130
+ using Mistica" (requires an agent with access to Figma, for example via the Figma MCP server)
131
+ - "Create a checkout form with Mistica components"
132
+ - "Build a settings page for a Telefonica app using Mistica"
133
+
134
+ You can also invoke the skill explicitly if your agent supports slash commands:
135
+
136
+ ```
137
+ /mistica-react implement a Netflix-like landing page
138
+ ```
139
+
125
140
  ### For LLMs reading this file
126
141
 
127
142
  If you are an AI assistant and `node_modules/@telefonica/mistica` is available in the project:
128
143
 
129
- 1. Read `node_modules/@telefonica/mistica/doc/llms.md` — start here, it has critical rules and an overview.
130
- 2. Read the specific doc files referenced inside `llms.md` based on the task at hand.
144
+ 1. Read `node_modules/@telefonica/mistica/doc/llms/llms.md` — start here, it has critical rules and an
145
+ overview.
146
+ 2. Read the specific doc files referenced inside `llms/llms.md` based on the task at hand.
131
147
 
132
148
  If `node_modules/@telefonica/mistica` is **not** available, fall back to the GitHub repository:
133
149
 
134
- - Main LLM reference: `https://github.com/Telefonica/mistica-web/blob/master/doc/llms.md`
150
+ - Main LLM reference: `https://github.com/Telefonica/mistica-web/blob/master/doc/llms/llms.md`
135
151
  - Components: `https://github.com/Telefonica/mistica-web/blob/master/doc/components.md`
136
152
  - Layout: `https://github.com/Telefonica/mistica-web/blob/master/doc/layout.md`
137
153
  - Patterns: `https://github.com/Telefonica/mistica-web/blob/master/doc/patterns.md`