@ptlm-azulejo/loader 1.0.0 → 1.1.0-alpha.66

package/CHANGELOG.md

@@ -0,0 +1,40 @@
+# Change Log
+
+## 1.1.0
+
+### Minor Changes
+
+- eb0b0f8: Make components follow the brand typeface, add the medium (500) font weight, and
+  expose stable `data-testid` hooks.
+
+  - Each preset now names its brand's typeface in `--font-family`
+    (`presets/leroy-merlin.css` → LeroyMerlin, `presets/adeo.css` → Roboto), with
+    `Arial, sans-serif` as the fallback stack.
+  - Components apply that typeface on their root, so they follow the active brand
+    instead of inheriting the host page's font. Opt out per component by setting
+    `--font-family: inherit` on it.
+  - `base.css` adds `--font-weight-medium: 500`, alongside the existing regular
+    (400), semi-bold (600) and bold (700) weights.
+  - Every component now exposes `data-testid` on its root and on meaningful
+    sub-parts (`button` / `button-spinner`, `loader` / `loader-text`,
+    `datepicker` / `datepicker-clear`, `segmented-control` /
+    `segmented-control-segment`), so tests can target them without depending on
+    CSS class names.
+
+  As with upstream Mozaic, the presets **name** the typeface but ship no
+  `@font-face` and no font binaries — loading the files stays the app's job, so you
+  keep control of hosting, subsetting and preload. Until you load them the fallback
+  stack renders and nothing breaks. Install the font package matching your brand
+  alongside the preset:
+
+  ```bash
+  # Leroy Merlin
+  yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
+  # Adeo
+  yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
+  ```
+
+  See the Fonts section of `packages/themes/README.md` for the full recipe.
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

package/dist/index.js

@@ -1,9 +1,13 @@
-import { defineComponent as d, computed as s, openBlock as r, createElementBlock as c, normalizeClass as p, createElementVNode as o, toDisplayString as u, createCommentVNode as _ } from "vue";
-const x = { class: "az-loader__spinner" }, z = ["viewBox"], m = ["r"], h = {
+import { defineComponent as n, computed as s, openBlock as r, createElementBlock as o, normalizeClass as p, createElementVNode as c, toDisplayString as u, createCommentVNode as x } from "vue";
+const _ = {
+  "data-testid": "loader-spinner",
+  class: "az-loader__spinner"
+}, z = ["viewBox"], m = ["r"], h = {
   key: 0,
+  "data-testid": "loader-text",
   class: "az-loader__text",
   role: "status"
-}, k = /* @__PURE__ */ d({
+}, k = /* @__PURE__ */ n({
   __name: "index",
   props: {
     appearance: { default: "standard" },
@@ -11,11 +15,11 @@ const x = { class: "az-loader__spinner" }, z = ["viewBox"], m = ["r"], h = {
     text: {}
   },
   setup(t) {
-    const a = t, l = s(() => ({
+    const a = t, d = s(() => ({
       [`az-loader--${a.size}`]: a.size && a.size !== "m",
       [`az-loader--${a.appearance}`]: a.appearance && a.appearance !== "standard",
       "az-loader--text-visible": a.text
-    })), n = s(() => {
+    })), l = s(() => {
       let e;
       switch (a.size) {
         case "xs":
@@ -48,17 +52,20 @@ const x = { class: "az-loader__spinner" }, z = ["viewBox"], m = ["r"], h = {
       }
       return e;
     });
-    return (e, v) => (r(), c("div", {
-      class: p(["az-loader", l.value])
+    return (e, v) => (r(), o("div", {
+      "data-testid": "loader",
+      class: p(["az-loader", d.value])
     }, [
-      o("span", x, [
-        (r(), c("svg", {
+      c("span", _, [
+        (r(), o("svg", {
+          "data-testid": "loader-icon",
           class: "az-loader__icon",
           xmlns: "http://www.w3.org/2000/svg",
-          viewBox: n.value,
+          viewBox: l.value,
           "aria-hidden": "true"
         }, [
-          o("circle", {
+          c("circle", {
+            "data-testid": "loader-path",
             class: "az-loader__path",
             cx: "50%",
             cy: "50%",
@@ -66,7 +73,7 @@ const x = { class: "az-loader__spinner" }, z = ["viewBox"], m = ["r"], h = {
           }, null, 8, m)
         ], 8, z))
       ]),
-      t.text ? (r(), c("p", h, u(t.text), 1)) : _("", !0)
+      t.text ? (r(), o("p", h, u(t.text), 1)) : x("", !0)
     ], 2));
   }
 });

package/dist/index.umd.cjs

@@ -1 +1 @@
-(function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s.loader={},s.Vue))})(this,function(s,e){"use strict";const c={class:"az-loader__spinner"},n=["viewBox"],r=["r"],l={key:0,class:"az-loader__text",role:"status"},i=e.defineComponent({__name:"index",props:{appearance:{default:"standard"},size:{default:"m"},text:{}},setup(o){const a=o,d=e.computed(()=>({[`az-loader--${a.size}`]:a.size&&a.size!=="m",[`az-loader--${a.appearance}`]:a.appearance&&a.appearance!=="standard","az-loader--text-visible":a.text})),p=e.computed(()=>{let t;switch(a.size){case"xs":t="0 0 20 20";break;case"s":t="0 0 24 24";break;case"l":t="0 0 64 64";break;default:t="0 0 32 32"}return t}),u=e.computed(()=>{let t;switch(a.size){case"xs":t=6;break;case"s":t=6;break;case"l":t=19;break;default:t=9}return t});return(t,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["az-loader",d.value])},[e.createElementVNode("span",c,[(e.openBlock(),e.createElementBlock("svg",{class:"az-loader__icon",xmlns:"http://www.w3.org/2000/svg",viewBox:p.value,"aria-hidden":"true"},[e.createElementVNode("circle",{class:"az-loader__path",cx:"50%",cy:"50%",r:u.value},null,8,r)],8,n))]),o.text?(e.openBlock(),e.createElementBlock("p",l,e.toDisplayString(o.text),1)):e.createCommentVNode("",!0)],2))}});s.AzLoader=i,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
+(function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s.loader={},s.Vue))})(this,function(s,e){"use strict";const r={"data-testid":"loader-spinner",class:"az-loader__spinner"},n=["viewBox"],d=["r"],c={key:0,"data-testid":"loader-text",class:"az-loader__text",role:"status"},i=e.defineComponent({__name:"index",props:{appearance:{default:"standard"},size:{default:"m"},text:{}},setup(o){const a=o,l=e.computed(()=>({[`az-loader--${a.size}`]:a.size&&a.size!=="m",[`az-loader--${a.appearance}`]:a.appearance&&a.appearance!=="standard","az-loader--text-visible":a.text})),p=e.computed(()=>{let t;switch(a.size){case"xs":t="0 0 20 20";break;case"s":t="0 0 24 24";break;case"l":t="0 0 64 64";break;default:t="0 0 32 32"}return t}),u=e.computed(()=>{let t;switch(a.size){case"xs":t=6;break;case"s":t=6;break;case"l":t=19;break;default:t=9}return t});return(t,m)=>(e.openBlock(),e.createElementBlock("div",{"data-testid":"loader",class:e.normalizeClass(["az-loader",l.value])},[e.createElementVNode("span",r,[(e.openBlock(),e.createElementBlock("svg",{"data-testid":"loader-icon",class:"az-loader__icon",xmlns:"http://www.w3.org/2000/svg",viewBox:p.value,"aria-hidden":"true"},[e.createElementVNode("circle",{"data-testid":"loader-path",class:"az-loader__path",cx:"50%",cy:"50%",r:u.value},null,8,d)],8,n))]),o.text?(e.openBlock(),e.createElementBlock("p",c,e.toDisplayString(o.text),1)):e.createCommentVNode("",!0)],2))}});s.AzLoader=i,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

package/dist/src/index.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../src/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAqC7B,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAyBnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC"}
+{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../src/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA6E7B,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAyBnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC"}

package/dist/style.css

@@ -1 +1 @@
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */:root{--loader-color-standard:var(--color-text-secondary);--loader-color-accent:var(--color-text-accent);--loader-color-inverse:var(--color-text-primary-inverse)}.az-loader{color:var(--loader-color-standard);flex-direction:column;align-items:center;display:inline-flex}.az-loader__spinner{height:calc(var(--spacing,.25rem) * 8);width:calc(var(--spacing,.25rem) * 8)}.az-loader--xs .az-loader__spinner{height:calc(var(--spacing,.25rem) * 5);width:calc(var(--spacing,.25rem) * 5)}.az-loader--s .az-loader__spinner{height:calc(var(--spacing,.25rem) * 6);width:calc(var(--spacing,.25rem) * 6)}.az-loader--l .az-loader__spinner{height:calc(var(--spacing,.25rem) * 16);width:calc(var(--spacing,.25rem) * 16)}.az-loader__path{stroke-width:4px}.az-loader--xs .az-loader__path{stroke-width:2px}.az-loader--l .az-loader__path{stroke-width:8px}.az-loader__spinner:not(:only-child){margin-bottom:calc(var(--spacing,.25rem) * 4)}.az-loader__icon{transform-origin:50%;animation:2s linear infinite rotate-loader}.az-loader__path{fill:none;stroke:currentColor;stroke-dasharray:1 200;stroke-dashoffset:0;stroke-linecap:round;animation:2s ease-in-out infinite animate-dash-loader}.az-loader__text{font-size:var(--font-size-05);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));color:currentColor}.az-loader--accent{color:var(--loader-color-accent)}.az-loader--inverse{color:var(--loader-color-inverse)}.az-loader:not(.az-loader--text-visible) .az-loader__text{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1 200;stroke-dashoffset:0}50%{stroke-dasharray:89 200;stroke-dashoffset:-35px}to{stroke-dasharray:89 200;stroke-dashoffset:-124px}}
+/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */:root{--loader-color-standard:var(--color-text-secondary);--loader-color-accent:var(--color-text-accent);--loader-color-inverse:var(--color-text-primary-inverse)}.az-loader{font-family:var(--font-family,ui-sans-serif, system-ui, sans-serif);color:var(--loader-color-standard);flex-direction:column;align-items:center;display:inline-flex}.az-loader__spinner{height:calc(var(--spacing,.25rem) * 8);width:calc(var(--spacing,.25rem) * 8)}.az-loader--xs .az-loader__spinner{height:calc(var(--spacing,.25rem) * 5);width:calc(var(--spacing,.25rem) * 5)}.az-loader--s .az-loader__spinner{height:calc(var(--spacing,.25rem) * 6);width:calc(var(--spacing,.25rem) * 6)}.az-loader--l .az-loader__spinner{height:calc(var(--spacing,.25rem) * 16);width:calc(var(--spacing,.25rem) * 16)}.az-loader__path{stroke-width:4px}.az-loader--xs .az-loader__path{stroke-width:2px}.az-loader--l .az-loader__path{stroke-width:8px}.az-loader__spinner:not(:only-child){margin-bottom:calc(var(--spacing,.25rem) * 4)}.az-loader__icon{transform-origin:50%;animation:2s linear infinite rotate-loader}.az-loader__path{fill:none;stroke:currentColor;stroke-dasharray:1 200;stroke-dashoffset:0;stroke-linecap:round;animation:2s ease-in-out infinite animate-dash-loader}.az-loader__text{font-size:var(--font-size-05);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));color:currentColor}.az-loader--accent{color:var(--loader-color-accent)}.az-loader--inverse{color:var(--loader-color-inverse)}.az-loader:not(.az-loader--text-visible) .az-loader__text{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1 200;stroke-dashoffset:0}50%{stroke-dasharray:89 200;stroke-dashoffset:-35px}to{stroke-dasharray:89 200;stroke-dashoffset:-124px}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ptlm-azulejo/loader",
-  "version": "1.0.0",
+  "version": "1.1.0-alpha.66",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
@@ -27,11 +27,13 @@
     "dist/*"
   ],
   "devDependencies": {
+    "@ptlm-azulejo/fonts-adeo": "*",
+    "@ptlm-azulejo/fonts-leroy-merlin": "*",
+    "@ptlm-azulejo/themes": "*",
     "@storybook/addon-essentials": "^7.0.0",
     "@storybook/addon-interactions": "^7.0.0",
     "@storybook/vue3": "^7.0.0",
     "@storybook/vue3-vite": "^7.0.0",
-    "@ptlm-azulejo/themes": "*",
     "@tailwindcss/vite": "^4.0.0",
     "storybook": "^7.0.0",
     "tailwindcss": "^4.0.0",