@semplice-studio/pa-design-system 0.2.0 → 0.3.0

package/dist/components/PaAccordion/PaAccordion.vue.d.ts

@@ -1,5 +1,4 @@
 import type { PaIconName } from '../PaIcon';
-export declare function nextPaAccordionId(): string;
 export interface PaAccordionProps {
     modelValue?: boolean;
     title?: string;

package/dist/components/PaAccordion/PaAccordion.vue.js

@@ -1,10 +1,8 @@
 import o from "./PaAccordion.vue2.js";
-import { nextPaAccordionId as p } from "./PaAccordion.vue2.js";
 /* empty css                 */
-import r from "../../_virtual/_plugin-vue_export-helper.js";
-const d = /* @__PURE__ */ r(o, [["__scopeId", "data-v-6a513fcd"]]);
+import a from "../../_virtual/_plugin-vue_export-helper.js";
+const f = /* @__PURE__ */ a(o, [["__scopeId", "data-v-83f7afca"]]);
 export {
-  d as default,
-  p as nextPaAccordionId
+  f as default
 };
 //# sourceMappingURL=PaAccordion.vue.js.map

package/dist/components/PaAccordion/PaAccordion.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaAccordion.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"PaAccordion.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/PaAccordion/PaAccordion.vue2.js

@@ -1,12 +1,7 @@
-import { defineComponent as B, getCurrentInstance as x, computed as c, inject as C, ref as I, onMounted as $, onBeforeUnmount as k, openBlock as v, createElementBlock as w, createElementVNode as r, createBlock as N, createCommentVNode as O, renderSlot as f, createTextVNode as P, toDisplayString as A, createVNode as _, Transition as S, withCtx as z, withDirectives as D, vShow as E } from "vue";
+import { defineComponent as B, getCurrentInstance as C, useId as I, computed as c, inject as $, ref as k, onMounted as x, onBeforeUnmount as w, openBlock as v, createElementBlock as N, createElementVNode as r, createBlock as O, createCommentVNode as P, renderSlot as f, createTextVNode as S, toDisplayString as z, createVNode as _, Transition as A, withCtx as D, withDirectives as E, vShow as T } from "vue";
 import g from "../PaIcon/PaIcon.vue.js";
-import { PaAccordionGroupKey as T } from "./groupKey.js";
-const j = ["data-open"], G = ["id", "aria-expanded", "aria-controls"], K = { class: "pa-accordion__title" }, M = ["id", "aria-labelledby"];
-let U = 0;
-function q() {
-  return `pa-accordion-${++U}`;
-}
-const R = /* @__PURE__ */ B({
+import { PaAccordionGroupKey as j } from "./groupKey.js";
+const G = ["data-open"], K = ["id", "aria-expanded", "aria-controls"], M = { class: "pa-accordion__title" }, U = ["id", "aria-labelledby"], Q = /* @__PURE__ */ B({
   __name: "PaAccordion",
   props: {
     modelValue: { type: Boolean },
@@ -17,16 +12,16 @@ const R = /* @__PURE__ */ B({
   },
   emits: ["update:modelValue"],
   setup(t, { emit: h }) {
-    const l = t, y = h, d = x().vnode.props ?? {}, s = "modelValue" in d || "model-value" in d, V = q(), o = c(() => l.id ?? V), u = c(() => `${o.value}-header`), p = c(() => `${o.value}-panel`), e = C(T, null), n = e ? e.isOpen(o.value) : null, m = I(l.defaultOpen), i = c(() => n ? n.value : s ? !!l.modelValue : m.value);
+    const l = t, y = h, d = C().vnode.props ?? {}, s = "modelValue" in d || "model-value" in d, V = `pa-accordion-${I()}`, o = c(() => l.id ?? V), u = c(() => `${o.value}-header`), p = c(() => `${o.value}-panel`), e = $(j, null), a = e ? e.isOpen(o.value) : null, m = k(l.defaultOpen), i = c(() => a ? a.value : s ? !!l.modelValue : m.value);
     function b() {
-      const a = !i.value;
-      e ? e.toggle(o.value) : s || (m.value = a), y("update:modelValue", a);
+      const n = !i.value;
+      e ? e.toggle(o.value) : s || (m.value = n), y("update:modelValue", n);
     }
-    return $(() => {
-      e && (e.register(o.value), l.defaultOpen && !(n != null && n.value) && e.toggle(o.value));
-    }), k(() => {
+    return x(() => {
+      e && (e.register(o.value), l.defaultOpen && !(a != null && a.value) && e.toggle(o.value));
+    }), w(() => {
       e && e.unregister(o.value);
-    }), (a, H) => (v(), w("div", {
+    }), (n, F) => (v(), N("div", {
       class: "pa-accordion",
       "data-open": i.value
     }, [
@@ -38,15 +33,15 @@ const R = /* @__PURE__ */ B({
         "aria-controls": p.value,
         onClick: b
       }, [
-        t.icon ? (v(), N(g, {
+        t.icon ? (v(), O(g, {
           key: 0,
           name: t.icon,
           size: "sm",
           class: "pa-accordion__icon"
-        }, null, 8, ["name"])) : O("", !0),
-        r("span", K, [
-          f(a.$slots, "title", {}, () => [
-            P(A(t.title), 1)
+        }, null, 8, ["name"])) : P("", !0),
+        r("span", M, [
+          f(n.$slots, "title", {}, () => [
+            S(z(t.title), 1)
           ], !0)
         ]),
         _(g, {
@@ -54,27 +49,26 @@ const R = /* @__PURE__ */ B({
           size: "sm",
           class: "pa-accordion__chevron"
         })
-      ], 8, G),
-      _(S, { name: "pa-accordion-body" }, {
-        default: z(() => [
-          D(r("div", {
+      ], 8, K),
+      _(A, { name: "pa-accordion-body" }, {
+        default: D(() => [
+          E(r("div", {
             class: "pa-accordion__body",
             id: p.value,
             role: "region",
             "aria-labelledby": u.value
           }, [
-            f(a.$slots, "default", {}, void 0, !0)
-          ], 8, M), [
-            [E, i.value]
+            f(n.$slots, "default", {}, void 0, !0)
+          ], 8, U), [
+            [T, i.value]
           ])
         ]),
         _: 3
       })
-    ], 8, j));
+    ], 8, G));
   }
 });
 export {
-  R as default,
-  q as nextPaAccordionId
+  Q as default
 };
 //# sourceMappingURL=PaAccordion.vue2.js.map

package/dist/components/PaAccordion/PaAccordion.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaAccordion.vue2.js","sources":["../../../src/components/PaAccordion/PaAccordion.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PaIconName } from '../PaIcon'\n\nlet uid = 0\nexport function nextPaAccordionId() {\n  return `pa-accordion-${++uid}`\n}\n\nexport interface PaAccordionProps {\n  modelValue?: boolean\n  title?: string\n  icon?: PaIconName\n  defaultOpen?: boolean\n  id?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  computed,\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n} from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\nimport { PaAccordionGroupKey } from './groupKey'\n\nconst props = withDefaults(defineProps<PaAccordionProps>(), {\n  defaultOpen: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst instance = getCurrentInstance()!\nconst initialVnodeProps = instance.vnode.props ?? {}\nconst isControlled =\n  'modelValue' in initialVnodeProps || 'model-value' in initialVnodeProps\n\nconst generatedId = nextPaAccordionId()\nconst resolvedId = computed(() => props.id ?? generatedId)\nconst headerId = computed(() => `${resolvedId.value}-header`)\nconst panelId = computed(() => `${resolvedId.value}-panel`)\n\nconst group = inject(PaAccordionGroupKey, null)\nconst groupOpen = group ? group.isOpen(resolvedId.value) : null\n\nconst internalOpen = ref(props.defaultOpen)\nconst open = computed(() => {\n  if (groupOpen) return groupOpen.value\n  if (isControlled) return Boolean(props.modelValue)\n  return internalOpen.value\n})\n\nfunction toggle() {\n  const next = !open.value\n  if (group) {\n    group.toggle(resolvedId.value)\n  } else if (!isControlled) {\n    internalOpen.value = next\n  }\n  emit('update:modelValue', next)\n}\n\nonMounted(() => {\n  if (!group) return\n  group.register(resolvedId.value)\n  if (props.defaultOpen && !groupOpen?.value) {\n    group.toggle(resolvedId.value)\n  }\n})\n\nonBeforeUnmount(() => {\n  if (group) group.unregister(resolvedId.value)\n})\n</script>\n\n<template>\n  <div class=\"pa-accordion\" :data-open=\"open\">\n    <button\n      class=\"pa-accordion__header\"\n      type=\"button\"\n      :id=\"headerId\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"panelId\"\n      @click=\"toggle\"\n    >\n      <PaIcon\n        v-if=\"icon\"\n        :name=\"icon\"\n        size=\"sm\"\n        class=\"pa-accordion__icon\"\n      />\n      <span class=\"pa-accordion__title\">\n        <slot name=\"title\">{{ title }}</slot>\n      </span>\n      <PaIcon\n        name=\"caret-down\"\n        size=\"sm\"\n        class=\"pa-accordion__chevron\"\n      />\n    </button>\n    <Transition name=\"pa-accordion-body\">\n      <div\n        v-show=\"open\"\n        class=\"pa-accordion__body\"\n        :id=\"panelId\"\n        role=\"region\"\n        :aria-labelledby=\"headerId\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </div>\n</template>\n\n<style scoped>\n.pa-accordion {\n  display: block;\n  width: 100%;\n  font-family: var(--pa-font-family-base);\n}\n\n.pa-accordion__header {\n  display: flex;\n  align-items: center;\n  gap: var(--pa-space-xs);\n  width: 100%;\n  padding: var(--pa-space-sm) var(--pa-space-md);\n  margin: 0;\n  border: none;\n  border-radius: var(--pa-radius-smooth);\n  background: var(--pa-color-primary);\n  color: var(--pa-color-text-white);\n  font-family: inherit;\n  font-size: var(--pa-font-label-sm-size);\n  line-height: var(--pa-font-label-sm-line-height);\n  font-weight: var(--pa-font-label-sm-weight);\n  text-align: left;\n  cursor: pointer;\n}\n\n.pa-accordion__header:focus { outline: none; }\n\n.pa-accordion__header:focus-visible {\n  outline: var(--pa-border-sm) solid var(--pa-color-primary-focus-border);\n  outline-offset: 2px;\n}\n\n.pa-accordion:not([data-open=\"true\"]) .pa-accordion__header:hover {\n  background: var(--pa-color-primary-hover);\n}\n\n.pa-accordion[data-open=\"true\"] .pa-accordion__header {\n  background: var(--pa-color-primary-pressed);\n}\n\n.pa-accordion__title {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.pa-accordion__icon {\n  flex-shrink: 0;\n}\n\n.pa-accordion__chevron {\n  flex-shrink: 0;\n  margin-left: auto;\n  transition: transform 150ms ease;\n}\n\n.pa-accordion[data-open=\"true\"] .pa-accordion__chevron {\n  transform: rotate(180deg);\n}\n\n.pa-accordion[data-open=\"true\"] .pa-accordion__header:hover {\n  background: var(--pa-color-primary-hover);\n}\n\n.pa-accordion__body {\n  padding: var(--pa-space-md);\n  background: var(--pa-color-bg-white);\n  color: var(--pa-color-text-black);\n  font-family: inherit;\n  font-size: var(--pa-font-body-size);\n  line-height: var(--pa-font-body-line-height);\n  font-weight: var(--pa-font-body-weight);\n}\n\n.pa-accordion-body-enter-active,\n.pa-accordion-body-leave-active {\n  transition: opacity 150ms ease, transform 150ms ease;\n}\n\n.pa-accordion-body-enter-from,\n.pa-accordion-body-leave-to {\n  opacity: 0;\n  transform: translateY(-4px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pa-accordion__chevron,\n  .pa-accordion-body-enter-active,\n  .pa-accordion-body-leave-active {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"names":["uid","nextPaAccordionId","props","__props","emit","__emit","initialVnodeProps","getCurrentInstance","isControlled","generatedId","resolvedId","computed","headerId","panelId","group","inject","PaAccordionGroupKey","groupOpen","internalOpen","ref","open","toggle","next","onMounted","onBeforeUnmount","_createElementBlock","_createElementVNode","_createBlock","PaIcon","_hoisted_3","_renderSlot","_ctx","_createVNode","_Transition"],"mappings":";;;;AAGA,IAAIA,IAAM;AACH,SAASC,IAAoB;AAClC,SAAO,gBAAgB,EAAED,CAAG;AAC9B;;;;;;;;;;;;AAuBA,UAAME,IAAQC,GAIRC,IAAOC,GAKPC,IADWC,EAAA,EACkB,MAAM,SAAS,CAAA,GAC5CC,IACJ,gBAAgBF,KAAqB,iBAAiBA,GAElDG,IAAcR,EAAA,GACdS,IAAaC,EAAS,MAAMT,EAAM,MAAMO,CAAW,GACnDG,IAAWD,EAAS,MAAM,GAAGD,EAAW,KAAK,SAAS,GACtDG,IAAUF,EAAS,MAAM,GAAGD,EAAW,KAAK,QAAQ,GAEpDI,IAAQC,EAAOC,GAAqB,IAAI,GACxCC,IAAYH,IAAQA,EAAM,OAAOJ,EAAW,KAAK,IAAI,MAErDQ,IAAeC,EAAIjB,EAAM,WAAW,GACpCkB,IAAOT,EAAS,MAChBM,IAAkBA,EAAU,QAC5BT,IAAqB,EAAQN,EAAM,aAChCgB,EAAa,KACrB;AAED,aAASG,IAAS;AAChB,YAAMC,IAAO,CAACF,EAAK;AACnB,MAAIN,IACFA,EAAM,OAAOJ,EAAW,KAAK,IACnBF,MACVU,EAAa,QAAQI,IAEvBlB,EAAK,qBAAqBkB,CAAI;AAAA,IAChC;AAEA,WAAAC,EAAU,MAAM;AACd,MAAKT,MACLA,EAAM,SAASJ,EAAW,KAAK,GAC3BR,EAAM,eAAe,EAACe,KAAA,QAAAA,EAAW,UACnCH,EAAM,OAAOJ,EAAW,KAAK;AAAA,IAEjC,CAAC,GAEDc,EAAgB,MAAM;AACpB,MAAIV,KAAOA,EAAM,WAAWJ,EAAW,KAAK;AAAA,IAC9C,CAAC,mBAICe,EAmCM,OAAA;AAAA,MAnCD,OAAM;AAAA,MAAgB,aAAWL,EAAA;AAAA,IAAA;MACpCM,EAsBS,UAAA;AAAA,QArBP,OAAM;AAAA,QACN,MAAK;AAAA,QACJ,IAAId,EAAA;AAAA,QACJ,iBAAeQ,EAAA;AAAA,QACf,iBAAeP,EAAA;AAAA,QACf,SAAOQ;AAAA,MAAA;QAGAlB,EAAA,aADRwB,EAKEC,GAAA;AAAA;UAHC,MAAMzB,EAAA;AAAA,UACP,MAAK;AAAA,UACL,OAAM;AAAA,QAAA;QAERuB,EAEO,QAFPG,GAEO;AAAA,UADLC,EAAqCC,uBAArC,MAAqC;AAAA,gBAAf5B,EAAA,KAAK,GAAA,CAAA;AAAA,UAAA;;QAE7B6B,EAIEJ,GAAA;AAAA,UAHA,MAAK;AAAA,UACL,MAAK;AAAA,UACL,OAAM;AAAA,QAAA;;MAGVI,EAUaC,GAAA,EAVD,MAAK,uBAAmB;AAAA,mBAClC,MAQM;AAAA,YARNP,EAQM,OAAA;AAAA,YANJ,OAAM;AAAA,YACL,IAAIb,EAAA;AAAA,YACL,MAAK;AAAA,YACJ,mBAAiBD,EAAA;AAAA,UAAA;YAElBkB,EAAQC,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAAA;gBANAX,EAAA,KAAI;AAAA,UAAA;;;;;;;"}
+{"version":3,"file":"PaAccordion.vue2.js","sources":["../../../src/components/PaAccordion/PaAccordion.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PaIconName } from '../PaIcon'\n\nexport interface PaAccordionProps {\n  modelValue?: boolean\n  title?: string\n  icon?: PaIconName\n  defaultOpen?: boolean\n  id?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useId } from 'vue'\nimport {\n  computed,\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n} from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\nimport { PaAccordionGroupKey } from './groupKey'\n\nconst props = withDefaults(defineProps<PaAccordionProps>(), {\n  defaultOpen: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst instance = getCurrentInstance()!\nconst initialVnodeProps = instance.vnode.props ?? {}\nconst isControlled =\n  'modelValue' in initialVnodeProps || 'model-value' in initialVnodeProps\n\nconst generatedId = `pa-accordion-${useId()}`\nconst resolvedId = computed(() => props.id ?? generatedId)\nconst headerId = computed(() => `${resolvedId.value}-header`)\nconst panelId = computed(() => `${resolvedId.value}-panel`)\n\nconst group = inject(PaAccordionGroupKey, null)\nconst groupOpen = group ? group.isOpen(resolvedId.value) : null\n\nconst internalOpen = ref(props.defaultOpen)\nconst open = computed(() => {\n  if (groupOpen) return groupOpen.value\n  if (isControlled) return Boolean(props.modelValue)\n  return internalOpen.value\n})\n\nfunction toggle() {\n  const next = !open.value\n  if (group) {\n    group.toggle(resolvedId.value)\n  } else if (!isControlled) {\n    internalOpen.value = next\n  }\n  emit('update:modelValue', next)\n}\n\nonMounted(() => {\n  if (!group) return\n  group.register(resolvedId.value)\n  if (props.defaultOpen && !groupOpen?.value) {\n    group.toggle(resolvedId.value)\n  }\n})\n\nonBeforeUnmount(() => {\n  if (group) group.unregister(resolvedId.value)\n})\n</script>\n\n<template>\n  <div class=\"pa-accordion\" :data-open=\"open\">\n    <button\n      class=\"pa-accordion__header\"\n      type=\"button\"\n      :id=\"headerId\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"panelId\"\n      @click=\"toggle\"\n    >\n      <PaIcon\n        v-if=\"icon\"\n        :name=\"icon\"\n        size=\"sm\"\n        class=\"pa-accordion__icon\"\n      />\n      <span class=\"pa-accordion__title\">\n        <slot name=\"title\">{{ title }}</slot>\n      </span>\n      <PaIcon\n        name=\"caret-down\"\n        size=\"sm\"\n        class=\"pa-accordion__chevron\"\n      />\n    </button>\n    <Transition name=\"pa-accordion-body\">\n      <div\n        v-show=\"open\"\n        class=\"pa-accordion__body\"\n        :id=\"panelId\"\n        role=\"region\"\n        :aria-labelledby=\"headerId\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </div>\n</template>\n\n<style scoped>\n.pa-accordion {\n  display: block;\n  width: 100%;\n  font-family: var(--pa-font-family-base);\n}\n\n.pa-accordion__header {\n  display: flex;\n  align-items: center;\n  gap: var(--pa-space-xs);\n  width: 100%;\n  padding: var(--pa-space-sm) var(--pa-space-md);\n  margin: 0;\n  border: none;\n  border-radius: var(--pa-radius-smooth);\n  background: var(--pa-color-primary);\n  color: var(--pa-color-text-white);\n  font-family: inherit;\n  font-size: var(--pa-font-label-sm-size);\n  line-height: var(--pa-font-label-sm-line-height);\n  font-weight: var(--pa-font-label-sm-weight);\n  text-align: left;\n  cursor: pointer;\n}\n\n.pa-accordion__header:focus { outline: none; }\n\n.pa-accordion__header:focus-visible {\n  outline: var(--pa-border-sm) solid var(--pa-color-primary-focus-border);\n  outline-offset: 2px;\n}\n\n.pa-accordion:not([data-open=\"true\"]) .pa-accordion__header:hover {\n  background: var(--pa-color-primary-hover);\n}\n\n.pa-accordion[data-open=\"true\"] .pa-accordion__header {\n  background: var(--pa-color-primary-pressed);\n}\n\n.pa-accordion__title {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.pa-accordion__icon {\n  flex-shrink: 0;\n}\n\n.pa-accordion__chevron {\n  flex-shrink: 0;\n  margin-left: auto;\n  transition: transform 150ms ease;\n}\n\n.pa-accordion[data-open=\"true\"] .pa-accordion__chevron {\n  transform: rotate(180deg);\n}\n\n.pa-accordion[data-open=\"true\"] .pa-accordion__header:hover {\n  background: var(--pa-color-primary-hover);\n}\n\n.pa-accordion__body {\n  padding: var(--pa-space-md);\n  background: var(--pa-color-bg-white);\n  color: var(--pa-color-text-black);\n  font-family: inherit;\n  font-size: var(--pa-font-body-size);\n  line-height: var(--pa-font-body-line-height);\n  font-weight: var(--pa-font-body-weight);\n}\n\n.pa-accordion-body-enter-active,\n.pa-accordion-body-leave-active {\n  transition: opacity 150ms ease, transform 150ms ease;\n}\n\n.pa-accordion-body-enter-from,\n.pa-accordion-body-leave-to {\n  opacity: 0;\n  transform: translateY(-4px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pa-accordion__chevron,\n  .pa-accordion-body-enter-active,\n  .pa-accordion-body-leave-active {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"names":["props","__props","emit","__emit","initialVnodeProps","getCurrentInstance","isControlled","generatedId","useId","resolvedId","computed","headerId","panelId","group","inject","PaAccordionGroupKey","groupOpen","internalOpen","ref","open","toggle","next","onMounted","onBeforeUnmount","_createElementBlock","_createElementVNode","_createBlock","PaIcon","_hoisted_3","_renderSlot","_ctx","_createVNode","_Transition"],"mappings":";;;;;;;;;;;;;;AAyBA,UAAMA,IAAQC,GAIRC,IAAOC,GAKPC,IADWC,EAAA,EACkB,MAAM,SAAS,CAAA,GAC5CC,IACJ,gBAAgBF,KAAqB,iBAAiBA,GAElDG,IAAc,gBAAgBC,EAAA,CAAO,IACrCC,IAAaC,EAAS,MAAMV,EAAM,MAAMO,CAAW,GACnDI,IAAWD,EAAS,MAAM,GAAGD,EAAW,KAAK,SAAS,GACtDG,IAAUF,EAAS,MAAM,GAAGD,EAAW,KAAK,QAAQ,GAEpDI,IAAQC,EAAOC,GAAqB,IAAI,GACxCC,IAAYH,IAAQA,EAAM,OAAOJ,EAAW,KAAK,IAAI,MAErDQ,IAAeC,EAAIlB,EAAM,WAAW,GACpCmB,IAAOT,EAAS,MAChBM,IAAkBA,EAAU,QAC5BV,IAAqB,EAAQN,EAAM,aAChCiB,EAAa,KACrB;AAED,aAASG,IAAS;AAChB,YAAMC,IAAO,CAACF,EAAK;AACnB,MAAIN,IACFA,EAAM,OAAOJ,EAAW,KAAK,IACnBH,MACVW,EAAa,QAAQI,IAEvBnB,EAAK,qBAAqBmB,CAAI;AAAA,IAChC;AAEA,WAAAC,EAAU,MAAM;AACd,MAAKT,MACLA,EAAM,SAASJ,EAAW,KAAK,GAC3BT,EAAM,eAAe,EAACgB,KAAA,QAAAA,EAAW,UACnCH,EAAM,OAAOJ,EAAW,KAAK;AAAA,IAEjC,CAAC,GAEDc,EAAgB,MAAM;AACpB,MAAIV,KAAOA,EAAM,WAAWJ,EAAW,KAAK;AAAA,IAC9C,CAAC,mBAICe,EAmCM,OAAA;AAAA,MAnCD,OAAM;AAAA,MAAgB,aAAWL,EAAA;AAAA,IAAA;MACpCM,EAsBS,UAAA;AAAA,QArBP,OAAM;AAAA,QACN,MAAK;AAAA,QACJ,IAAId,EAAA;AAAA,QACJ,iBAAeQ,EAAA;AAAA,QACf,iBAAeP,EAAA;AAAA,QACf,SAAOQ;AAAA,MAAA;QAGAnB,EAAA,aADRyB,EAKEC,GAAA;AAAA;UAHC,MAAM1B,EAAA;AAAA,UACP,MAAK;AAAA,UACL,OAAM;AAAA,QAAA;QAERwB,EAEO,QAFPG,GAEO;AAAA,UADLC,EAAqCC,uBAArC,MAAqC;AAAA,gBAAf7B,EAAA,KAAK,GAAA,CAAA;AAAA,UAAA;;QAE7B8B,EAIEJ,GAAA;AAAA,UAHA,MAAK;AAAA,UACL,MAAK;AAAA,UACL,OAAM;AAAA,QAAA;;MAGVI,EAUaC,GAAA,EAVD,MAAK,uBAAmB;AAAA,mBAClC,MAQM;AAAA,YARNP,EAQM,OAAA;AAAA,YANJ,OAAM;AAAA,YACL,IAAIb,EAAA;AAAA,YACL,MAAK;AAAA,YACJ,mBAAiBD,EAAA;AAAA,UAAA;YAElBkB,EAAQC,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAAA;gBANAX,EAAA,KAAI;AAAA,UAAA;;;;;;;"}

package/dist/components/PaBanner/PaBanner.vue.js

@@ -1,12 +1,12 @@
 import o from "./PaBanner.vue2.js";
-import { VARIANT_A11Y as p, VARIANT_ICONS as e, VARIANT_LABELS as c } from "./PaBanner.vue2.js";
+import { VARIANT_A11Y as e, VARIANT_ICONS as f, VARIANT_LABELS as s } from "./PaBanner.vue2.js";
 /* empty css              */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const A = /* @__PURE__ */ r(o, [["__scopeId", "data-v-0950fca6"]]);
+const a = /* @__PURE__ */ r(o, [["__scopeId", "data-v-17237900"]]);
 export {
-  p as VARIANT_A11Y,
-  e as VARIANT_ICONS,
-  c as VARIANT_LABELS,
-  A as default
+  e as VARIANT_A11Y,
+  f as VARIANT_ICONS,
+  s as VARIANT_LABELS,
+  a as default
 };
 //# sourceMappingURL=PaBanner.vue.js.map

package/dist/components/PaBanner/PaBanner.vue2.js

@@ -1,29 +1,27 @@
-import { defineComponent as p, computed as o, openBlock as l, createElementBlock as c, normalizeClass as b, createElementVNode as e, createVNode as _, toDisplayString as f, renderSlot as d, createCommentVNode as m } from "vue";
+import { defineComponent as p, useId as b, computed as o, openBlock as l, createElementBlock as c, normalizeClass as f, createElementVNode as e, createVNode as d, toDisplayString as m, renderSlot as _, createCommentVNode as A } from "vue";
 import v from "../PaIcon/PaIcon.vue.js";
-const A = ["role", "aria-live", "aria-label"], h = { class: "pa-banner__container" }, g = { class: "pa-banner__icon pa-banner__icon--leading" }, L = { class: "pa-banner__content" }, N = { class: "pa-banner__title-row" }, k = { class: "pa-banner__icon pa-banner__icon--inline" }, w = { class: "pa-banner__body" }, I = {
+const h = ["role", "aria-live", "aria-label"], g = { class: "pa-banner__container" }, L = { class: "pa-banner__icon pa-banner__icon--leading" }, N = { class: "pa-banner__content" }, k = { class: "pa-banner__title-row" }, I = { class: "pa-banner__icon pa-banner__icon--inline" }, w = { class: "pa-banner__body" }, V = {
   key: 0,
   class: "pa-banner__action"
-}, V = {
+}, $ = {
   info: "info",
   "info-dark": "info",
   success: "check-circle",
   warning: "warning-circle",
   error: "warning"
-}, $ = {
+}, y = {
   info: { role: "status", ariaLive: "polite" },
   "info-dark": { role: "status", ariaLive: "polite" },
   success: { role: "status", ariaLive: "polite" },
   warning: { role: "alert", ariaLive: "assertive" },
   error: { role: "alert", ariaLive: "assertive" }
-}, y = {
+}, z = {
   info: "Avviso",
   "info-dark": "Avviso scuro",
   success: "Notifica di successo",
   warning: "Attenzione",
   error: "Errore"
-};
-let S = 0;
-const E = /* @__PURE__ */ p({
+}, S = /* @__PURE__ */ p({
   __name: "PaBanner",
   props: {
     variant: { default: "info" },
@@ -31,25 +29,25 @@ const E = /* @__PURE__ */ p({
     label: { default: void 0 }
   },
   setup(n) {
-    const a = n, r = `pa-banner-${++S}__title`, u = o(() => a.label ?? y[a.variant]), t = o(() => $[a.variant]), s = o(() => V[a.variant]);
-    return (i, z) => (l(), c("aside", {
-      class: b(["pa-banner", `pa-banner--${n.variant}`]),
+    const a = n, r = `pa-banner-${b()}__title`, u = o(() => a.label ?? z[a.variant]), t = o(() => y[a.variant]), s = o(() => $[a.variant]);
+    return (i, B) => (l(), c("aside", {
+      class: f(["pa-banner", `pa-banner--${n.variant}`]),
       role: t.value.role,
       "aria-live": t.value.ariaLive,
       "aria-labelledby": r,
       "aria-label": u.value
     }, [
-      e("div", h, [
-        e("div", g, [
-          _(v, {
+      e("div", g, [
+        e("div", L, [
+          d(v, {
             name: s.value,
             size: "lg"
           }, null, 8, ["name"])
         ]),
-        e("div", L, [
-          e("div", N, [
-            e("div", k, [
-              _(v, {
+        e("div", N, [
+          e("div", k, [
+            e("div", I, [
+              d(v, {
                 name: s.value,
                 size: "lg"
               }, null, 8, ["name"])
@@ -57,23 +55,23 @@ const E = /* @__PURE__ */ p({
             e("h3", {
               id: r,
               class: "pa-banner__title"
-            }, f(n.title), 1)
+            }, m(n.title), 1)
           ]),
           e("div", w, [
-            d(i.$slots, "default", {}, void 0, !0)
+            _(i.$slots, "default", {}, void 0, !0)
           ])
         ]),
-        i.$slots.action ? (l(), c("div", I, [
-          d(i.$slots, "action", {}, void 0, !0)
-        ])) : m("", !0)
+        i.$slots.action ? (l(), c("div", V, [
+          _(i.$slots, "action", {}, void 0, !0)
+        ])) : A("", !0)
       ])
-    ], 10, A));
+    ], 10, h));
   }
 });
 export {
-  $ as VARIANT_A11Y,
-  V as VARIANT_ICONS,
-  y as VARIANT_LABELS,
-  E as default
+  y as VARIANT_A11Y,
+  $ as VARIANT_ICONS,
+  z as VARIANT_LABELS,
+  S as default
 };
 //# sourceMappingURL=PaBanner.vue2.js.map

package/dist/components/PaBanner/PaBanner.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaBanner.vue2.js","sources":["../../../src/components/PaBanner/PaBanner.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PaIconName } from '../PaIcon/PaIcon.vue'\n\nexport type PaBannerVariant =\n  | 'info'\n  | 'info-dark'\n  | 'success'\n  | 'warning'\n  | 'error'\n\nexport interface PaBannerProps {\n  variant?: PaBannerVariant\n  title: string\n  label?: string\n}\n\nexport const VARIANT_ICONS: Record<PaBannerVariant, PaIconName> = {\n  'info': 'info',\n  'info-dark': 'info',\n  'success': 'check-circle',\n  'warning': 'warning-circle',\n  'error': 'warning',\n}\n\nexport const VARIANT_A11Y: Record<\n  PaBannerVariant,\n  { role: 'status' | 'alert'; ariaLive: 'polite' | 'assertive' }\n> = {\n  'info': { role: 'status', ariaLive: 'polite' },\n  'info-dark': { role: 'status', ariaLive: 'polite' },\n  'success': { role: 'status', ariaLive: 'polite' },\n  'warning': { role: 'alert', ariaLive: 'assertive' },\n  'error': { role: 'alert', ariaLive: 'assertive' },\n}\n\nexport const VARIANT_LABELS: Record<PaBannerVariant, string> = {\n  'info': 'Avviso',\n  'info-dark': 'Avviso scuro',\n  'success': 'Notifica di successo',\n  'warning': 'Attenzione',\n  'error': 'Errore',\n}\n\nlet bannerSeq = 0\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\n\nconst props = withDefaults(defineProps<PaBannerProps>(), {\n  variant: 'info',\n  label: undefined,\n})\n\nconst titleId = `pa-banner-${++bannerSeq}__title`\n\nconst resolvedLabel = computed(() => props.label ?? VARIANT_LABELS[props.variant])\nconst resolvedA11y = computed(() => VARIANT_A11Y[props.variant])\nconst resolvedIcon = computed(() => VARIANT_ICONS[props.variant])\n</script>\n\n<template>\n  <aside :class=\"['pa-banner', `pa-banner--${variant}`]\"\n         :role=\"resolvedA11y.role\"\n         :aria-live=\"resolvedA11y.ariaLive\"\n         :aria-labelledby=\"titleId\"\n         :aria-label=\"resolvedLabel\">\n    <div class=\"pa-banner__container\">\n      <div class=\"pa-banner__icon pa-banner__icon--leading\">\n        <PaIcon :name=\"resolvedIcon\"\n                size=\"lg\" />\n      </div>\n      <div class=\"pa-banner__content\">\n        <div class=\"pa-banner__title-row\">\n          <div class=\"pa-banner__icon pa-banner__icon--inline\">\n            <PaIcon :name=\"resolvedIcon\"\n                    size=\"lg\" />\n          </div>\n          <h3 :id=\"titleId\"\n              class=\"pa-banner__title\">{{ title }}</h3>\n        </div>\n        <div class=\"pa-banner__body\">\n          <slot />\n        </div>\n      </div>\n      <div v-if=\"$slots.action\"\n           class=\"pa-banner__action\">\n        <slot name=\"action\" />\n      </div>\n    </div>\n  </aside>\n</template>\n\n<style scoped>\n.pa-banner {\n  container-type: inline-size;\n  font-family: var(--pa-font-family-base);\n  border-radius: var(--pa-radius-smooth);\n  background: var(--pa-banner-bg);\n  color: var(--pa-banner-text);\n\n  --pa-banner-bg: var(--pa-color-bg-primary-light-40);\n  --pa-banner-text: var(--pa-color-text-secondary-gray);\n  --pa-banner-body: var(--pa-color-text-black);\n  --pa-banner-link: var(--pa-color-primary);\n  --pa-banner-icon-color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-banner__container {\n  max-width: 1172px;\n  margin: 0 auto;\n  padding: var(--pa-space-md) var(--pa-space-2xl);\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n}\n\n.pa-banner__icon {\n  color: var(--pa-banner-icon-color);\n  display: flex;\n  align-items: center;\n}\n\n.pa-banner__icon--leading {\n  padding-right: var(--pa-space-md);\n}\n\n.pa-banner__icon--inline {\n  display: none;\n}\n\n.pa-banner__content {\n  flex: 1 1 0;\n  min-width: 0;\n}\n\n.pa-banner__action {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: var(--pa-space-2xl);\n}\n\n.pa-banner__title {\n  margin: 0;\n  font-size: var(--pa-font-h4-size);\n  line-height: var(--pa-font-h4-line-height);\n  font-weight: var(--pa-font-h4-weight);\n  letter-spacing: var(--pa-font-h4-letter-spacing);\n  color: var(--pa-banner-text);\n}\n\n.pa-banner__body {\n  margin-top: var(--pa-space-xs);\n  font-size: var(--pa-font-body-size);\n  line-height: var(--pa-font-body-line-height);\n  font-weight: var(--pa-font-body-weight);\n  color: var(--pa-banner-body);\n}\n\n.pa-banner__body :deep(a) {\n  color: var(--pa-banner-link);\n  text-decoration: underline;\n}\n\n.pa-banner--info-dark {\n  --pa-banner-bg: var(--pa-color-bg-primary-dark-115);\n  --pa-banner-text: var(--pa-color-text-white);\n  --pa-banner-body: var(--pa-color-text-white);\n  --pa-banner-link: var(--pa-color-accent);\n  --pa-banner-icon-color: var(--pa-color-text-white);\n}\n\n.pa-banner--success {\n  --pa-banner-icon-color: var(--pa-color-success);\n}\n\n.pa-banner--warning {\n  --pa-banner-icon-color: var(--pa-color-warning);\n}\n\n.pa-banner--error {\n  --pa-banner-icon-color: var(--pa-color-error);\n}\n\n@container (max-width: 600px) {\n  .pa-banner {\n    border-radius: 0;\n  }\n\n  .pa-banner__container {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n    padding: var(--pa-space-md);\n  }\n\n  .pa-banner__icon--leading {\n    display: none;\n  }\n\n  .pa-banner__icon--inline {\n    display: flex;\n  }\n\n  .pa-banner__title-row {\n    display: flex;\n    align-items: center;\n    gap: var(--pa-space-md);\n  }\n\n  .pa-banner__body {\n    margin-top: var(--pa-space-md);\n  }\n\n  .pa-banner__action {\n    display: block;\n    width: 100%;\n    padding-left: 0;\n    margin-top: var(--pa-space-md);\n  }\n\n  .pa-banner__action :deep(.pa-button) {\n    width: 100%;\n  }\n}\n</style>\n"],"names":["VARIANT_ICONS","VARIANT_A11Y","VARIANT_LABELS","bannerSeq","props","__props","titleId","resolvedLabel","computed","resolvedA11y","resolvedIcon","_createElementBlock","_createElementVNode","_hoisted_2","_hoisted_3","_createVNode","PaIcon","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_renderSlot","_ctx","$slots","_openBlock","_hoisted_8"],"mappings":";;;;;GAgBaA,IAAqD;AAAA,EAChE,MAAQ;AAAA,EACR,aAAa;AAAA,EACb,SAAW;AAAA,EACX,SAAW;AAAA,EACX,OAAS;AACX,GAEaC,IAGT;AAAA,EACF,MAAQ,EAAE,MAAM,UAAU,UAAU,SAAA;AAAA,EACpC,aAAa,EAAE,MAAM,UAAU,UAAU,SAAA;AAAA,EACzC,SAAW,EAAE,MAAM,UAAU,UAAU,SAAA;AAAA,EACvC,SAAW,EAAE,MAAM,SAAS,UAAU,YAAA;AAAA,EACtC,OAAS,EAAE,MAAM,SAAS,UAAU,YAAA;AACtC,GAEaC,IAAkD;AAAA,EAC7D,MAAQ;AAAA,EACR,aAAa;AAAA,EACb,SAAW;AAAA,EACX,SAAW;AAAA,EACX,OAAS;AACX;AAEA,IAAIC,IAAY;;;;;;;;;AAOhB,UAAMC,IAAQC,GAKRC,IAAU,aAAa,EAAEH,CAAS,WAElCI,IAAgBC,EAAS,MAAMJ,EAAM,SAASF,EAAeE,EAAM,OAAO,CAAC,GAC3EK,IAAeD,EAAS,MAAMP,EAAaG,EAAM,OAAO,CAAC,GACzDM,IAAeF,EAAS,MAAMR,EAAcI,EAAM,OAAO,CAAC;2BAI9DO,EA4BQ,SAAA;AAAA,MA5BA,qCAAmCN,EAAA,OAAO,EAAA,CAAA;AAAA,MAC1C,MAAMI,EAAA,MAAa;AAAA,MACnB,aAAWA,EAAA,MAAa;AAAA,MACxB,mBAAiBH;AAAA,MACjB,cAAYC,EAAA;AAAA,IAAA;MAClBK,EAsBM,OAtBNC,GAsBM;AAAA,QArBJD,EAGM,OAHNE,GAGM;AAAA,UAFJC,EACoBC,GAAA;AAAA,YADX,MAAMN,EAAA;AAAA,YACP,MAAK;AAAA,UAAA;;QAEfE,EAYM,OAZNK,GAYM;AAAA,UAXJL,EAOM,OAPNM,GAOM;AAAA,YANJN,EAGM,OAHNO,GAGM;AAAA,cAFJJ,EACoBC,GAAA;AAAA,gBADX,MAAMN,EAAA;AAAA,gBACP,MAAK;AAAA,cAAA;;YAEfE,EAC6C,MAAA;AAAA,cADxC,IAAIN;AAAA,cACL,OAAM;AAAA,YAAA,KAAsBD,EAAA,KAAK,GAAA,CAAA;AAAA,UAAA;UAEvCO,EAEM,OAFNQ,GAEM;AAAA,YADJC,EAAQC,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAAA;;QAGDC,EAAAA,OAAO,UAAlBC,KAAAb,EAGM,OAHNc,GAGM;AAAA,UADJJ,EAAsBC,EAAA,QAAA,UAAA,CAAA,GAAA,QAAA,EAAA;AAAA,QAAA;;;;;"}
+{"version":3,"file":"PaBanner.vue2.js","sources":["../../../src/components/PaBanner/PaBanner.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PaIconName } from '../PaIcon/PaIcon.vue'\n\nexport type PaBannerVariant =\n  | 'info'\n  | 'info-dark'\n  | 'success'\n  | 'warning'\n  | 'error'\n\nexport interface PaBannerProps {\n  variant?: PaBannerVariant\n  title: string\n  label?: string\n}\n\nexport const VARIANT_ICONS: Record<PaBannerVariant, PaIconName> = {\n  'info': 'info',\n  'info-dark': 'info',\n  'success': 'check-circle',\n  'warning': 'warning-circle',\n  'error': 'warning',\n}\n\nexport const VARIANT_A11Y: Record<\n  PaBannerVariant,\n  { role: 'status' | 'alert'; ariaLive: 'polite' | 'assertive' }\n> = {\n  'info': { role: 'status', ariaLive: 'polite' },\n  'info-dark': { role: 'status', ariaLive: 'polite' },\n  'success': { role: 'status', ariaLive: 'polite' },\n  'warning': { role: 'alert', ariaLive: 'assertive' },\n  'error': { role: 'alert', ariaLive: 'assertive' },\n}\n\nexport const VARIANT_LABELS: Record<PaBannerVariant, string> = {\n  'info': 'Avviso',\n  'info-dark': 'Avviso scuro',\n  'success': 'Notifica di successo',\n  'warning': 'Attenzione',\n  'error': 'Errore',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\n\nconst props = withDefaults(defineProps<PaBannerProps>(), {\n  variant: 'info',\n  label: undefined,\n})\n\nconst titleId = `pa-banner-${useId()}__title`\n\nconst resolvedLabel = computed(() => props.label ?? VARIANT_LABELS[props.variant])\nconst resolvedA11y = computed(() => VARIANT_A11Y[props.variant])\nconst resolvedIcon = computed(() => VARIANT_ICONS[props.variant])\n</script>\n\n<template>\n  <aside :class=\"['pa-banner', `pa-banner--${variant}`]\"\n         :role=\"resolvedA11y.role\"\n         :aria-live=\"resolvedA11y.ariaLive\"\n         :aria-labelledby=\"titleId\"\n         :aria-label=\"resolvedLabel\">\n    <div class=\"pa-banner__container\">\n      <div class=\"pa-banner__icon pa-banner__icon--leading\">\n        <PaIcon :name=\"resolvedIcon\"\n                size=\"lg\" />\n      </div>\n      <div class=\"pa-banner__content\">\n        <div class=\"pa-banner__title-row\">\n          <div class=\"pa-banner__icon pa-banner__icon--inline\">\n            <PaIcon :name=\"resolvedIcon\"\n                    size=\"lg\" />\n          </div>\n          <h3 :id=\"titleId\"\n              class=\"pa-banner__title\">{{ title }}</h3>\n        </div>\n        <div class=\"pa-banner__body\">\n          <slot />\n        </div>\n      </div>\n      <div v-if=\"$slots.action\"\n           class=\"pa-banner__action\">\n        <slot name=\"action\" />\n      </div>\n    </div>\n  </aside>\n</template>\n\n<style scoped>\n.pa-banner {\n  container-type: inline-size;\n  font-family: var(--pa-font-family-base);\n  border-radius: var(--pa-radius-smooth);\n  background: var(--pa-banner-bg);\n  color: var(--pa-banner-text);\n\n  --pa-banner-bg: var(--pa-color-bg-primary-light-40);\n  --pa-banner-text: var(--pa-color-text-secondary-gray);\n  --pa-banner-body: var(--pa-color-text-black);\n  --pa-banner-link: var(--pa-color-primary);\n  --pa-banner-icon-color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-banner__container {\n  max-width: 1172px;\n  margin: 0 auto;\n  padding: var(--pa-space-md) var(--pa-space-2xl);\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n}\n\n.pa-banner__icon {\n  color: var(--pa-banner-icon-color);\n  display: flex;\n  align-items: center;\n}\n\n.pa-banner__icon--leading {\n  padding-right: var(--pa-space-md);\n}\n\n.pa-banner__icon--inline {\n  display: none;\n}\n\n.pa-banner__content {\n  flex: 1 1 0;\n  min-width: 0;\n}\n\n.pa-banner__action {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: var(--pa-space-2xl);\n}\n\n.pa-banner__title {\n  margin: 0;\n  font-size: var(--pa-font-h4-size);\n  line-height: var(--pa-font-h4-line-height);\n  font-weight: var(--pa-font-h4-weight);\n  letter-spacing: var(--pa-font-h4-letter-spacing);\n  color: var(--pa-banner-text);\n}\n\n.pa-banner__body {\n  margin-top: var(--pa-space-xs);\n  font-size: var(--pa-font-body-size);\n  line-height: var(--pa-font-body-line-height);\n  font-weight: var(--pa-font-body-weight);\n  color: var(--pa-banner-body);\n}\n\n.pa-banner__body :deep(a) {\n  color: var(--pa-banner-link);\n  text-decoration: underline;\n}\n\n.pa-banner--info-dark {\n  --pa-banner-bg: var(--pa-color-bg-primary-dark-115);\n  --pa-banner-text: var(--pa-color-text-white);\n  --pa-banner-body: var(--pa-color-text-white);\n  --pa-banner-link: var(--pa-color-accent);\n  --pa-banner-icon-color: var(--pa-color-text-white);\n}\n\n.pa-banner--success {\n  --pa-banner-icon-color: var(--pa-color-success);\n}\n\n.pa-banner--warning {\n  --pa-banner-icon-color: var(--pa-color-warning);\n}\n\n.pa-banner--error {\n  --pa-banner-icon-color: var(--pa-color-error);\n}\n\n@container (max-width: 600px) {\n  .pa-banner {\n    border-radius: 0;\n  }\n\n  .pa-banner__container {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n    padding: var(--pa-space-md);\n  }\n\n  .pa-banner__icon--leading {\n    display: none;\n  }\n\n  .pa-banner__icon--inline {\n    display: flex;\n  }\n\n  .pa-banner__title-row {\n    display: flex;\n    align-items: center;\n    gap: var(--pa-space-md);\n  }\n\n  .pa-banner__body {\n    margin-top: var(--pa-space-md);\n  }\n\n  .pa-banner__action {\n    display: block;\n    width: 100%;\n    padding-left: 0;\n    margin-top: var(--pa-space-md);\n  }\n\n  .pa-banner__action :deep(.pa-button) {\n    width: 100%;\n  }\n}\n</style>\n"],"names":["VARIANT_ICONS","VARIANT_A11Y","VARIANT_LABELS","props","__props","titleId","useId","resolvedLabel","computed","resolvedA11y","resolvedIcon","_createElementBlock","_createElementVNode","_hoisted_2","_hoisted_3","_createVNode","PaIcon","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_renderSlot","_ctx","$slots","_openBlock","_hoisted_8"],"mappings":";;;;;GAgBaA,IAAqD;AAAA,EAChE,MAAQ;AAAA,EACR,aAAa;AAAA,EACb,SAAW;AAAA,EACX,SAAW;AAAA,EACX,OAAS;AACX,GAEaC,IAGT;AAAA,EACF,MAAQ,EAAE,MAAM,UAAU,UAAU,SAAA;AAAA,EACpC,aAAa,EAAE,MAAM,UAAU,UAAU,SAAA;AAAA,EACzC,SAAW,EAAE,MAAM,UAAU,UAAU,SAAA;AAAA,EACvC,SAAW,EAAE,MAAM,SAAS,UAAU,YAAA;AAAA,EACtC,OAAS,EAAE,MAAM,SAAS,UAAU,YAAA;AACtC,GAEaC,IAAkD;AAAA,EAC7D,MAAQ;AAAA,EACR,aAAa;AAAA,EACb,SAAW;AAAA,EACX,SAAW;AAAA,EACX,OAAS;AACX;;;;;;;;AAOA,UAAMC,IAAQC,GAKRC,IAAU,aAAaC,EAAA,CAAO,WAE9BC,IAAgBC,EAAS,MAAML,EAAM,SAASD,EAAeC,EAAM,OAAO,CAAC,GAC3EM,IAAeD,EAAS,MAAMP,EAAaE,EAAM,OAAO,CAAC,GACzDO,IAAeF,EAAS,MAAMR,EAAcG,EAAM,OAAO,CAAC;2BAI9DQ,EA4BQ,SAAA;AAAA,MA5BA,qCAAmCP,EAAA,OAAO,EAAA,CAAA;AAAA,MAC1C,MAAMK,EAAA,MAAa;AAAA,MACnB,aAAWA,EAAA,MAAa;AAAA,MACxB,mBAAiBJ;AAAA,MACjB,cAAYE,EAAA;AAAA,IAAA;MAClBK,EAsBM,OAtBNC,GAsBM;AAAA,QArBJD,EAGM,OAHNE,GAGM;AAAA,UAFJC,EACoBC,GAAA;AAAA,YADX,MAAMN,EAAA;AAAA,YACP,MAAK;AAAA,UAAA;;QAEfE,EAYM,OAZNK,GAYM;AAAA,UAXJL,EAOM,OAPNM,GAOM;AAAA,YANJN,EAGM,OAHNO,GAGM;AAAA,cAFJJ,EACoBC,GAAA;AAAA,gBADX,MAAMN,EAAA;AAAA,gBACP,MAAK;AAAA,cAAA;;YAEfE,EAC6C,MAAA;AAAA,cADxC,IAAIP;AAAA,cACL,OAAM;AAAA,YAAA,KAAsBD,EAAA,KAAK,GAAA,CAAA;AAAA,UAAA;UAEvCQ,EAEM,OAFNQ,GAEM;AAAA,YADJC,EAAQC,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAAA;;QAGDC,EAAAA,OAAO,UAAlBC,KAAAb,EAGM,OAHNc,GAGM;AAAA,UADJJ,EAAsBC,EAAA,QAAA,UAAA,CAAA,GAAA,QAAA,EAAA;AAAA,QAAA;;;;;"}

package/dist/components/PaCard/PaCard.vue.d.ts

@@ -17,26 +17,29 @@ export interface PaCardProps {
     imageAlt?: string;
     imageRatio?: PaImageRatio;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PaCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PaCardProps> & Readonly<{}>, {
-    variant: PaCardVariant;
-    titleLevel: 1 | 2 | 3 | 4 | 5 | 6;
-    imageAlt: string;
-    typology: PaCardTypology;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    'header-leading'?: (props: {}) => any;
+declare var __VLS_4: {}, __VLS_12: {}, __VLS_18: {}, __VLS_20: {}, __VLS_22: {}, __VLS_24: {}, __VLS_26: {};
+type __VLS_Slots = {} & {
+    'header-leading'?: (props: typeof __VLS_4) => any;
 } & {
-    'header-trailing'?: (props: {}) => any;
+    'header-trailing'?: (props: typeof __VLS_12) => any;
 } & {
-    title?: (props: {}) => any;
+    title?: (props: typeof __VLS_18) => any;
 } & {
-    subtitle?: (props: {}) => any;
+    subtitle?: (props: typeof __VLS_20) => any;
 } & {
-    body?: (props: {}) => any;
+    body?: (props: typeof __VLS_22) => any;
 } & {
-    signature?: (props: {}) => any;
+    signature?: (props: typeof __VLS_24) => any;
 } & {
-    footer?: (props: {}) => any;
-}>;
+    footer?: (props: typeof __VLS_26) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<PaCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PaCardProps> & Readonly<{}>, {
+    variant: PaCardVariant;
+    titleLevel: 1 | 2 | 3 | 4 | 5 | 6;
+    imageAlt: string;
+    typology: PaCardTypology;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/components/PaCard/PaCard.vue.js

@@ -1,8 +1,8 @@
 import o from "./PaCard.vue2.js";
 /* empty css            */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-d5096dd1"]]);
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-830dccf3"]]);
 export {
-  m as default
+  f as default
 };
 //# sourceMappingURL=PaCard.vue.js.map

package/dist/components/PaCard/PaCard.vue2.js

@@ -1,40 +1,35 @@
-import { defineComponent as I, computed as a, useSlots as B, openBlock as t, createElementBlock as s, normalizeClass as T, createElementVNode as y, createVNode as N, createCommentVNode as l, renderSlot as r, createBlock as g, createTextVNode as n, toDisplayString as d, resolveDynamicComponent as V, withCtx as H } from "vue";
-import L from "../PaIcon/PaIcon.vue.js";
-import P from "../PaImage/PaImage.vue.js";
-import R from "../PaTag/PaTag.vue.js";
-const z = ["aria-labelledby"], A = { class: "pa-card__layout" }, D = {
+import { defineComponent as B, computed as a, useSlots as C, useId as T, openBlock as t, createElementBlock as s, normalizeClass as N, createElementVNode as y, createVNode as V, createCommentVNode as l, renderSlot as r, createBlock as g, createTextVNode as n, toDisplayString as d, resolveDynamicComponent as H, withCtx as L } from "vue";
+import P from "../PaIcon/PaIcon.vue.js";
+import R from "../PaImage/PaImage.vue.js";
+import z from "../PaTag/PaTag.vue.js";
+const A = ["aria-labelledby"], D = { class: "pa-card__layout" }, E = {
   key: 0,
   class: "pa-card__image-cell"
-}, E = { class: "pa-card__content" }, w = {
+}, w = { class: "pa-card__content" }, j = {
   key: 0,
   class: "pa-card__header"
-}, U = {
+}, q = {
   key: 0,
   class: "pa-card__header-leading"
-}, j = {
+}, F = {
   key: 1,
   class: "pa-card__header-trailing"
-}, q = {
+}, G = {
   key: 1,
   class: "pa-card__title-block"
-}, F = {
+}, J = {
   key: 1,
   class: "pa-card__subtitle"
-}, G = {
+}, K = {
   key: 2,
   class: "pa-card__body"
-}, J = { class: "pa-card__body-text" }, K = {
+}, M = { class: "pa-card__body-text" }, O = {
   key: 3,
   class: "pa-card__signature"
-}, M = {
+}, Q = {
   key: 4,
   class: "pa-card__footer"
-};
-let O = 0;
-function Q() {
-  return ++O;
-}
-const ee = /* @__PURE__ */ I({
+}, x = /* @__PURE__ */ B({
   __name: "PaCard",
   props: {
     typology: { default: "portrait" },
@@ -54,82 +49,82 @@ const ee = /* @__PURE__ */ I({
   setup(e) {
     const o = e, b = a(
       () => o.imageRatio ?? (o.typology === "landscape" ? "1:1" : "3:2")
-    ), c = B(), v = `pa-card-${Q()}__title`, u = a(() => !!c.title || !!o.title), h = a(() => !!c.subtitle || !!o.subtitle), f = a(() => !!c.body || !!o.body), k = a(() => !!c.signature || !!o.signature), m = a(
+    ), c = C(), v = `pa-card-${T()}__title`, u = a(() => !!c.title || !!o.title), h = a(() => !!c.subtitle || !!o.subtitle), f = a(() => !!c.body || !!o.body), k = a(() => !!c.signature || !!o.signature), m = a(
       () => !!c["header-leading"] || !!o.category || !!o.categoryIcon
     ), _ = a(
       () => !!c["header-trailing"] || !!o.date
-    ), $ = a(() => m.value || _.value), p = a(() => u.value || h.value), S = a(() => u.value ? v : void 0), C = a(() => `h${o.titleLevel}`);
-    return (i, W) => (t(), s("article", {
-      class: T(["pa-card", [`pa-card--${e.typology}`, `pa-card--${e.variant}`]]),
+    ), $ = a(() => m.value || _.value), p = a(() => u.value || h.value), S = a(() => u.value ? v : void 0), I = a(() => `h${o.titleLevel}`);
+    return (i, U) => (t(), s("article", {
+      class: N(["pa-card", [`pa-card--${e.typology}`, `pa-card--${e.variant}`]]),
       "aria-labelledby": S.value
     }, [
-      y("div", A, [
-        e.imageSrc && e.typology !== "process" ? (t(), s("div", D, [
-          N(P, {
+      y("div", D, [
+        e.imageSrc && e.typology !== "process" ? (t(), s("div", E, [
+          V(R, {
             src: e.imageSrc,
             alt: e.imageAlt,
             ratio: b.value
           }, null, 8, ["src", "alt", "ratio"])
         ])) : l("", !0),
-        y("div", E, [
-          $.value ? (t(), s("div", w, [
-            m.value ? (t(), s("div", U, [
+        y("div", w, [
+          $.value ? (t(), s("div", j, [
+            m.value ? (t(), s("div", q, [
               r(i.$slots, "header-leading", {}, () => [
-                e.categoryIcon ? (t(), g(L, {
+                e.categoryIcon ? (t(), g(P, {
                   key: 0,
                   name: e.categoryIcon,
                   size: "lg"
-                }, null, 8, ["name"])) : e.category ? (t(), g(R, {
+                }, null, 8, ["name"])) : e.category ? (t(), g(z, {
                   key: 1,
                   variant: "info",
                   label: e.category
                 }, null, 8, ["label"])) : l("", !0)
               ], !0)
             ])) : l("", !0),
-            _.value ? (t(), s("div", j, [
+            _.value ? (t(), s("div", F, [
               r(i.$slots, "header-trailing", {}, () => [
                 n(d(e.date), 1)
               ], !0)
             ])) : l("", !0)
           ])) : l("", !0),
-          p.value ? (t(), s("div", q, [
-            u.value ? (t(), g(V(C.value), {
+          p.value ? (t(), s("div", G, [
+            u.value ? (t(), g(H(I.value), {
               key: 0,
               id: v,
               class: "pa-card__title"
             }, {
-              default: H(() => [
+              default: L(() => [
                 r(i.$slots, "title", {}, () => [
                   n(d(e.title), 1)
                 ], !0)
               ]),
               _: 3
             })) : l("", !0),
-            h.value ? (t(), s("p", F, [
+            h.value ? (t(), s("p", J, [
               r(i.$slots, "subtitle", {}, () => [
                 n(d(e.subtitle), 1)
               ], !0)
             ])) : l("", !0)
           ])) : l("", !0),
-          f.value ? (t(), s("div", G, [
+          f.value ? (t(), s("div", K, [
             r(i.$slots, "body", {}, () => [
-              y("p", J, d(e.body), 1)
+              y("p", M, d(e.body), 1)
             ], !0)
           ])) : l("", !0),
-          k.value ? (t(), s("p", K, [
+          k.value ? (t(), s("p", O, [
             r(i.$slots, "signature", {}, () => [
               n(d(e.signature), 1)
             ], !0)
           ])) : l("", !0),
-          i.$slots.footer ? (t(), s("div", M, [
+          i.$slots.footer ? (t(), s("div", Q, [
             r(i.$slots, "footer", {}, void 0, !0)
           ])) : l("", !0)
         ])
       ])
-    ], 10, z));
+    ], 10, A));
   }
 });
 export {
-  ee as default
+  x as default
 };
 //# sourceMappingURL=PaCard.vue2.js.map

package/dist/components/PaCard/PaCard.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaCard.vue2.js","sources":["../../../src/components/PaCard/PaCard.vue"],"sourcesContent":["<script lang=\"ts\">\nlet cardUid = 0\nfunction nextCardId() {\n  return ++cardUid\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\nimport PaImage from '../PaImage/PaImage.vue'\nimport PaTag from '../PaTag/PaTag.vue'\nimport type { PaImageRatio } from '../PaImage/PaImage.vue'\nimport type { PaIconName } from '../PaIcon/PaIcon.vue'\n\nexport type PaCardTypology = 'landscape' | 'portrait' | 'process'\nexport type PaCardVariant = 'light' | 'dark'\n\nexport interface PaCardProps {\n  typology?: PaCardTypology\n  variant?: PaCardVariant\n  title?: string\n  titleLevel?: 1 | 2 | 3 | 4 | 5 | 6\n  subtitle?: string\n  body?: string\n  signature?: string\n  date?: string\n  category?: string\n  categoryIcon?: PaIconName\n  imageSrc?: string\n  imageAlt?: string\n  imageRatio?: PaImageRatio\n}\n\nconst props = withDefaults(defineProps<PaCardProps>(), {\n  typology: 'portrait',\n  variant: 'light',\n  titleLevel: 3,\n  imageAlt: '',\n})\n\nconst resolvedRatio = computed<PaImageRatio>(\n  () => props.imageRatio ?? (props.typology === 'landscape' ? '1:1' : '3:2'),\n)\n\nconst slots = useSlots()\n\nconst titleId = `pa-card-${nextCardId()}__title`\n\nconst hasTitle = computed(() => !!slots.title || !!props.title)\nconst hasSubtitle = computed(() => !!slots.subtitle || !!props.subtitle)\nconst hasBody = computed(() => !!slots.body || !!props.body)\nconst hasSignature = computed(() => !!slots.signature || !!props.signature)\nconst hasHeaderLeading = computed(\n  () => !!slots['header-leading'] || !!props.category || !!props.categoryIcon,\n)\nconst hasHeaderTrailing = computed(\n  () => !!slots['header-trailing'] || !!props.date,\n)\nconst hasHeader = computed(() => hasHeaderLeading.value || hasHeaderTrailing.value)\nconst hasTitleBlock = computed(() => hasTitle.value || hasSubtitle.value)\nconst labelledBy = computed(() => (hasTitle.value ? titleId : undefined))\nconst titleTag = computed(() => `h${props.titleLevel}` as const)\n</script>\n\n<template>\n  <article class=\"pa-card\"\n           :class=\"[`pa-card--${typology}`, `pa-card--${variant}`]\"\n           :aria-labelledby=\"labelledBy\">\n    <div class=\"pa-card__layout\">\n    <div v-if=\"imageSrc && typology !== 'process'\"\n         class=\"pa-card__image-cell\">\n      <PaImage :src=\"imageSrc\"\n               :alt=\"imageAlt\"\n               :ratio=\"resolvedRatio\" />\n    </div>\n\n    <div class=\"pa-card__content\">\n      <div v-if=\"hasHeader\"\n           class=\"pa-card__header\">\n        <div v-if=\"hasHeaderLeading\"\n             class=\"pa-card__header-leading\">\n          <slot name=\"header-leading\">\n            <PaIcon v-if=\"categoryIcon\"\n                    :name=\"categoryIcon\"\n                    size=\"lg\" />\n            <PaTag v-else-if=\"category\"\n                   variant=\"info\"\n                   :label=\"category\" />\n          </slot>\n        </div>\n        <div v-if=\"hasHeaderTrailing\"\n             class=\"pa-card__header-trailing\">\n          <slot name=\"header-trailing\">{{ date }}</slot>\n        </div>\n      </div>\n\n      <div v-if=\"hasTitleBlock\"\n           class=\"pa-card__title-block\">\n        <component :is=\"titleTag\"\n                   v-if=\"hasTitle\"\n                   :id=\"titleId\"\n                   class=\"pa-card__title\">\n          <slot name=\"title\">{{ title }}</slot>\n        </component>\n        <p v-if=\"hasSubtitle\"\n           class=\"pa-card__subtitle\">\n          <slot name=\"subtitle\">{{ subtitle }}</slot>\n        </p>\n      </div>\n\n      <div v-if=\"hasBody\"\n           class=\"pa-card__body\">\n        <slot name=\"body\">\n          <p class=\"pa-card__body-text\">{{ body }}</p>\n        </slot>\n      </div>\n\n      <p v-if=\"hasSignature\"\n         class=\"pa-card__signature\">\n        <slot name=\"signature\">{{ signature }}</slot>\n      </p>\n\n      <div v-if=\"$slots.footer\"\n           class=\"pa-card__footer\">\n        <slot name=\"footer\" />\n      </div>\n    </div>\n    </div>\n  </article>\n</template>\n\n<style scoped>\n.pa-card {\n  display: block;\n  background-color: var(--pa-card-bg);\n  border-radius: var(--pa-radius-smooth);\n  box-shadow: var(--pa-shadow-elevation-01);\n  overflow: hidden;\n  container-type: inline-size;\n}\n\n.pa-card__layout {\n  display: flex;\n  flex-direction: column;\n}\n\n.pa-card--light {\n  --pa-card-bg: var(--pa-color-bg-white);\n  --pa-card-title-color: var(--pa-color-primary);\n  --pa-card-body-color: var(--pa-color-text-secondary-gray);\n  --pa-card-date-color: var(--pa-color-text-secondary-gray);\n  --pa-card-signature-color: var(--pa-color-text-secondary-gray);\n  --pa-card-subtitle-color: var(--pa-color-text-secondary-gray);\n  --pa-card-action-color: var(--pa-color-primary);\n}\n\n.pa-card--dark {\n  --pa-card-bg: var(--pa-color-bg-primary-dark-115);\n  --pa-card-title-color: var(--pa-color-bg-white);\n  --pa-card-body-color: var(--pa-color-bg-white);\n  --pa-card-date-color: var(--pa-color-bg-white);\n  --pa-card-signature-color: var(--pa-color-bg-white);\n  --pa-card-subtitle-color: var(--pa-color-bg-white);\n  --pa-card-action-color: var(--pa-color-accent);\n}\n\n.pa-card--process.pa-card--dark {\n  --pa-card-title-color: var(--pa-color-bg-white);\n}\n\n.pa-card--portrait .pa-card__image-cell {\n  width: 100%;\n}\n\n.pa-card--portrait .pa-card__content {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  padding: 32px;\n  min-width: 0;\n}\n\n.pa-card__header {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  width: 100%;\n}\n\n.pa-card__header-leading {\n  flex: 1 0 0;\n  min-width: 0;\n}\n\n.pa-card__header-trailing {\n  flex: 0 0 auto;\n  font-family: var(--pa-font-family-mono);\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 18px;\n  color: var(--pa-card-date-color);\n}\n\n.pa-card__title-block {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  width: 100%;\n}\n\n.pa-card__title {\n  margin: 0;\n  font-family: var(--pa-font-family-base);\n  font-weight: 700;\n  font-size: 24px;\n  line-height: 28px;\n  letter-spacing: -0.5px;\n  color: var(--pa-card-title-color);\n}\n\n.pa-card--portrait .pa-card__subtitle {\n  margin: 0;\n  font-family: var(--pa-font-family-base);\n  font-weight: 600;\n  font-size: 18px;\n  line-height: 22px;\n  letter-spacing: -0.5px;\n  color: var(--pa-card-subtitle-color);\n}\n\n.pa-card__body,\n.pa-card__body-text {\n  margin: 0;\n  font-family: var(--pa-font-family-base);\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 20px;\n  color: var(--pa-card-body-color);\n}\n\n.pa-card__signature {\n  margin: 0;\n  font-family: var(--pa-font-family-mono);\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 18px;\n  color: var(--pa-card-signature-color);\n}\n\n.pa-card__footer {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n}\n\n/* Landscape */\n.pa-card--landscape .pa-card__layout {\n  display: grid;\n  grid-template-columns: 370px 1fr;\n  align-items: stretch;\n}\n\n.pa-card--landscape .pa-card__image-cell {\n  width: auto;\n  height: 100%;\n}\n\n.pa-card--landscape .pa-card__content {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: 24px;\n  padding: 32px 48px;\n}\n\n.pa-card--landscape .pa-card__title {\n  font-size: 32px;\n  line-height: 36px;\n  letter-spacing: -1px;\n}\n\n.pa-card--landscape .pa-card__subtitle {\n  margin: 0;\n  font-family: var(--pa-font-family-base);\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 24px;\n  letter-spacing: -0.5px;\n  color: var(--pa-card-subtitle-color);\n}\n\n/* Process */\n.pa-card--process .pa-card__content {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  padding: 32px;\n  min-width: 0;\n}\n\n.pa-card--process.pa-card--light {\n  --pa-card-title-color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-card--process .pa-card__subtitle,\n.pa-card--process .pa-card__signature {\n  display: none;\n}\n\n.pa-card--process .pa-card__footer {\n  padding-top: 24px;\n}\n\n.pa-card--process .pa-card__header-leading :deep(svg) {\n  width: 32px;\n  height: 32px;\n}\n\n@container (max-width: 720px) {\n  .pa-card--landscape .pa-card__layout {\n    grid-template-columns: 1fr;\n  }\n\n  .pa-card--landscape .pa-card__image-cell {\n    width: 100%;\n    height: auto;\n  }\n\n  .pa-card--landscape .pa-card__image-cell :deep(.pa-image) {\n    aspect-ratio: 3 / 2 !important;\n  }\n\n  .pa-card--landscape .pa-card__content {\n    padding: 24px;\n  }\n\n  .pa-card--landscape .pa-card__title {\n    font-size: 24px;\n    line-height: 28px;\n    letter-spacing: -0.5px;\n  }\n}\n</style>\n"],"names":["cardUid","nextCardId","props","__props","resolvedRatio","computed","slots","useSlots","titleId","hasTitle","hasSubtitle","hasBody","hasSignature","hasHeaderLeading","hasHeaderTrailing","hasHeader","hasTitleBlock","labelledBy","titleTag","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_2","_openBlock","_hoisted_3","_createVNode","PaImage","_hoisted_4","_hoisted_5","_hoisted_6","_renderSlot","_ctx","_createBlock","PaIcon","PaTag","_hoisted_7","_hoisted_8","_resolveDynamicComponent","_hoisted_9","_hoisted_10","_hoisted_11","_toDisplayString","_hoisted_12","$slots","_hoisted_13"],"mappings":"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"}
+{"version":3,"file":"PaCard.vue2.js","sources":["../../../src/components/PaCard/PaCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useId, useSlots } from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\nimport PaImage from '../PaImage/PaImage.vue'\nimport PaTag from '../PaTag/PaTag.vue'\nimport type { PaImageRatio } from '../PaImage/PaImage.vue'\nimport type { PaIconName } from '../PaIcon/PaIcon.vue'\n\nexport type PaCardTypology = 'landscape' | 'portrait' | 'process'\nexport type PaCardVariant = 'light' | 'dark'\n\nexport interface PaCardProps {\n  typology?: PaCardTypology\n  variant?: PaCardVariant\n  title?: string\n  titleLevel?: 1 | 2 | 3 | 4 | 5 | 6\n  subtitle?: string\n  body?: string\n  signature?: string\n  date?: string\n  category?: string\n  categoryIcon?: PaIconName\n  imageSrc?: string\n  imageAlt?: string\n  imageRatio?: PaImageRatio\n}\n\nconst props = withDefaults(defineProps<PaCardProps>(), {\n  typology: 'portrait',\n  variant: 'light',\n  titleLevel: 3,\n  imageAlt: '',\n})\n\nconst resolvedRatio = computed<PaImageRatio>(\n  () => props.imageRatio ?? (props.typology === 'landscape' ? '1:1' : '3:2'),\n)\n\nconst slots = useSlots()\n\nconst titleId = `pa-card-${useId()}__title`\n\nconst hasTitle = computed(() => !!slots.title || !!props.title)\nconst hasSubtitle = computed(() => !!slots.subtitle || !!props.subtitle)\nconst hasBody = computed(() => !!slots.body || !!props.body)\nconst hasSignature = computed(() => !!slots.signature || !!props.signature)\nconst hasHeaderLeading = computed(\n  () => !!slots['header-leading'] || !!props.category || !!props.categoryIcon,\n)\nconst hasHeaderTrailing = computed(\n  () => !!slots['header-trailing'] || !!props.date,\n)\nconst hasHeader = computed(() => hasHeaderLeading.value || hasHeaderTrailing.value)\nconst hasTitleBlock = computed(() => hasTitle.value || hasSubtitle.value)\nconst labelledBy = computed(() => (hasTitle.value ? titleId : undefined))\nconst titleTag = computed(() => `h${props.titleLevel}` as const)\n</script>\n\n<template>\n  <article class=\"pa-card\"\n           :class=\"[`pa-card--${typology}`, `pa-card--${variant}`]\"\n           :aria-labelledby=\"labelledBy\">\n    <div class=\"pa-card__layout\">\n    <div v-if=\"imageSrc && typology !== 'process'\"\n         class=\"pa-card__image-cell\">\n      <PaImage :src=\"imageSrc\"\n               :alt=\"imageAlt\"\n               :ratio=\"resolvedRatio\" />\n    </div>\n\n    <div class=\"pa-card__content\">\n      <div v-if=\"hasHeader\"\n           class=\"pa-card__header\">\n        <div v-if=\"hasHeaderLeading\"\n             class=\"pa-card__header-leading\">\n          <slot name=\"header-leading\">\n            <PaIcon v-if=\"categoryIcon\"\n                    :name=\"categoryIcon\"\n                    size=\"lg\" />\n            <PaTag v-else-if=\"category\"\n                   variant=\"info\"\n                   :label=\"category\" />\n          </slot>\n        </div>\n        <div v-if=\"hasHeaderTrailing\"\n             class=\"pa-card__header-trailing\">\n          <slot name=\"header-trailing\">{{ date }}</slot>\n        </div>\n      </div>\n\n      <div v-if=\"hasTitleBlock\"\n           class=\"pa-card__title-block\">\n        <component :is=\"titleTag\"\n                   v-if=\"hasTitle\"\n                   :id=\"titleId\"\n                   class=\"pa-card__title\">\n          <slot name=\"title\">{{ title }}</slot>\n        </component>\n        <p v-if=\"hasSubtitle\"\n           class=\"pa-card__subtitle\">\n          <slot name=\"subtitle\">{{ subtitle }}</slot>\n        </p>\n      </div>\n\n      <div v-if=\"hasBody\"\n           class=\"pa-card__body\">\n        <slot name=\"body\">\n          <p class=\"pa-card__body-text\">{{ body }}</p>\n        </slot>\n      </div>\n\n      <p v-if=\"hasSignature\"\n         class=\"pa-card__signature\">\n        <slot name=\"signature\">{{ signature }}</slot>\n      </p>\n\n      <div v-if=\"$slots.footer\"\n           class=\"pa-card__footer\">\n        <slot name=\"footer\" />\n      </div>\n    </div>\n    </div>\n  </article>\n</template>\n\n<style scoped>\n.pa-card {\n  display: block;\n  background-color: var(--pa-card-bg);\n  border-radius: var(--pa-radius-smooth);\n  box-shadow: var(--pa-shadow-elevation-01);\n  overflow: hidden;\n  container-type: inline-size;\n}\n\n.pa-card__layout {\n  display: flex;\n  flex-direction: column;\n}\n\n.pa-card--light {\n  --pa-card-bg: var(--pa-color-bg-white);\n  --pa-card-title-color: var(--pa-color-primary);\n  --pa-card-body-color: var(--pa-color-text-secondary-gray);\n  --pa-card-date-color: var(--pa-color-text-secondary-gray);\n  --pa-card-signature-color: var(--pa-color-text-secondary-gray);\n  --pa-card-subtitle-color: var(--pa-color-text-secondary-gray);\n  --pa-card-action-color: var(--pa-color-primary);\n}\n\n.pa-card--dark {\n  --pa-card-bg: var(--pa-color-bg-primary-dark-115);\n  --pa-card-title-color: var(--pa-color-bg-white);\n  --pa-card-body-color: var(--pa-color-bg-white);\n  --pa-card-date-color: var(--pa-color-bg-white);\n  --pa-card-signature-color: var(--pa-color-bg-white);\n  --pa-card-subtitle-color: var(--pa-color-bg-white);\n  --pa-card-action-color: var(--pa-color-accent);\n}\n\n.pa-card--process.pa-card--dark {\n  --pa-card-title-color: var(--pa-color-bg-white);\n}\n\n.pa-card--portrait .pa-card__image-cell {\n  width: 100%;\n}\n\n.pa-card--portrait .pa-card__content {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  padding: 32px;\n  min-width: 0;\n}\n\n.pa-card__header {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  width: 100%;\n}\n\n.pa-card__header-leading {\n  flex: 1 0 0;\n  min-width: 0;\n}\n\n.pa-card__header-trailing {\n  flex: 0 0 auto;\n  font-family: var(--pa-font-family-mono);\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 18px;\n  color: var(--pa-card-date-color);\n}\n\n.pa-card__title-block {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  width: 100%;\n}\n\n.pa-card__title {\n  margin: 0;\n  font-family: var(--pa-font-family-base);\n  font-weight: 700;\n  font-size: 24px;\n  line-height: 28px;\n  letter-spacing: -0.5px;\n  color: var(--pa-card-title-color);\n}\n\n.pa-card--portrait .pa-card__subtitle {\n  margin: 0;\n  font-family: var(--pa-font-family-base);\n  font-weight: 600;\n  font-size: 18px;\n  line-height: 22px;\n  letter-spacing: -0.5px;\n  color: var(--pa-card-subtitle-color);\n}\n\n.pa-card__body,\n.pa-card__body-text {\n  margin: 0;\n  font-family: var(--pa-font-family-base);\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 20px;\n  color: var(--pa-card-body-color);\n}\n\n.pa-card__signature {\n  margin: 0;\n  font-family: var(--pa-font-family-mono);\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 18px;\n  color: var(--pa-card-signature-color);\n}\n\n.pa-card__footer {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n}\n\n/* Landscape */\n.pa-card--landscape .pa-card__layout {\n  display: grid;\n  grid-template-columns: 370px 1fr;\n  align-items: stretch;\n}\n\n.pa-card--landscape .pa-card__image-cell {\n  width: auto;\n  height: 100%;\n}\n\n.pa-card--landscape .pa-card__content {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: 24px;\n  padding: 32px 48px;\n}\n\n.pa-card--landscape .pa-card__title {\n  font-size: 32px;\n  line-height: 36px;\n  letter-spacing: -1px;\n}\n\n.pa-card--landscape .pa-card__subtitle {\n  margin: 0;\n  font-family: var(--pa-font-family-base);\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 24px;\n  letter-spacing: -0.5px;\n  color: var(--pa-card-subtitle-color);\n}\n\n/* Process */\n.pa-card--process .pa-card__content {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  padding: 32px;\n  min-width: 0;\n}\n\n.pa-card--process.pa-card--light {\n  --pa-card-title-color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-card--process .pa-card__subtitle,\n.pa-card--process .pa-card__signature {\n  display: none;\n}\n\n.pa-card--process .pa-card__footer {\n  padding-top: 24px;\n}\n\n.pa-card--process .pa-card__header-leading :deep(svg) {\n  width: 32px;\n  height: 32px;\n}\n\n@container (max-width: 720px) {\n  .pa-card--landscape .pa-card__layout {\n    grid-template-columns: 1fr;\n  }\n\n  .pa-card--landscape .pa-card__image-cell {\n    width: 100%;\n    height: auto;\n  }\n\n  .pa-card--landscape .pa-card__image-cell :deep(.pa-image) {\n    aspect-ratio: 3 / 2 !important;\n  }\n\n  .pa-card--landscape .pa-card__content {\n    padding: 24px;\n  }\n\n  .pa-card--landscape .pa-card__title {\n    font-size: 24px;\n    line-height: 28px;\n    letter-spacing: -0.5px;\n  }\n}\n</style>\n"],"names":["props","__props","resolvedRatio","computed","slots","useSlots","titleId","useId","hasTitle","hasSubtitle","hasBody","hasSignature","hasHeaderLeading","hasHeaderTrailing","hasHeader","hasTitleBlock","labelledBy","titleTag","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_2","_openBlock","_hoisted_3","_createVNode","PaImage","_hoisted_4","_hoisted_5","_hoisted_6","_renderSlot","_ctx","_createBlock","PaIcon","PaTag","_hoisted_7","_hoisted_8","_resolveDynamicComponent","_hoisted_9","_hoisted_10","_hoisted_11","_toDisplayString","_hoisted_12","$slots","_hoisted_13"],"mappings":"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"}