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

package/README.md

@@ -1,166 +1,123 @@
-# Coding-Agent Project Template
+# @semplice-studio/pa-design-system
 
-A boilerplate that captures the Sapra.ai development methodology — a **Plan first, Develop second** workflow optimized for working with a coding agent like Claude Code.
+Vue 3 design system for Italian **Pubblica Amministrazione (PA)** web portals — accessible, brand-consistent components and design tokens, by [Semplice](https://semplice.is).
 
-This template doesn't ship application code. It ships the **scaffolding the agent needs** to make good decisions in your project: a structured `CLAUDE.md`, a `docs/` knowledge base, and a set of skills (`/init-prd`, `/import-design-system`, `/data-model`, `/user-story`, `/ui-composer`, `/figma-component`) that drive the project from empty repo to shipped feature.
+- **41 components** (15 atoms + 26 composed) — forms, navigation, overlays, data display, date/time pickers
+- **Design tokens as CSS custom properties**, with Inter + Roboto Mono bundled via `@font-face`
+- **Accessibility-first**: WAI-ARIA patterns, keyboard navigation, focus management — built toward Italian PA requirements (AgID / Legge Stanca)
+- **ESM-only**, tree-shakeable, typed (`.d.ts` for every component)
+- Italian default labels everywhere, overridable via props for other locales
 
-## Philosophy
+> ⚠️ **Pre-1.0**: minor versions may contain breaking changes until `v1.0.0`.
 
-- **Knowledge as code.** Everything the agent needs to know lives in version-controlled markdown — no tribal knowledge, no Slack archeology.
-- **One conversation per phase.** Each skill is a guided Q&A that produces one durable artifact (PRD, design system, data model, user story).
-- **Plan first, develop second.** No code is written before a plan is confirmed. Stories are drafted before they're built. Components are mapped before they're composed.
-- **Per-step approval.** The agent never batch-implements. Every user story gets its own approval gate.
+## Requirements
 
-## The flow
+- Vue **≥ 3.4**
+- Node **≥ 20** (build tooling)
 
-There are two flavors depending on what you're building. Pick one bootstrap skill at step 2 — the rest is identical.
+## Installation
 
-### Product / app project
-
-```
-1. Clone this template       →  empty repo with .claude/ + docs/ scaffolding
-2. /init-prd                 →  dialog → docs/prd.md + populated CLAUDE.md
-3. /import-design-system     →  Figma → docs/frontend/design-system.md + tokens
-4. /data-model               →  dialog → docs/data-model.md + schema sketch
-5. /user-story <topic>       →  Q&A → docs/user-stories/user-stories-vX.X.md
-6. /user-story implement vX.X →  loop: plan → approve → implement → tick AC
-7. git commit                →  one bundled commit per story
-```
-
-### Library / npm package project (e.g. a Vue design system)
-
-```
-1. Clone this template       →  empty repo with .claude/ + docs/ scaffolding
-2. /init-library             →  dialog → docs/prd.md (library spec) + CLAUDE.md
-                                + optional package.json + tsconfig + build config
-3. /import-design-system     →  Figma → docs/frontend/design-system.md + tokens
-4. (skip /data-model — libraries have no data model)
-5. /user-story <component>   →  Q&A → docs/user-stories/user-stories-vX.X.md
-6. /user-story implement vX.X →  loop: plan → approve → /figma-component → tick AC
-7. git commit                →  one bundled commit per story (or per component)
+```bash
+pnpm add @semplice-studio/pa-design-system
+# or: npm install / yarn add
 ```
 
-The two paths are mutually exclusive — you pick `/init-prd` or `/init-library` once per project, not both.
+`@phosphor-icons/vue` and `v-calendar` are installed automatically as dependencies; `vue` is a peer.
 
-## How this maps to software development phases
+## Quickstart — Nuxt 3/4
 
-The template isn't a novel methodology — it's a classic software development lifecycle, reorganized so that **every phase produces an agent-readable artifact** and **every artifact accumulates into a living knowledge base**.
-
-The flow has two macro-phases:
-
-- **Setup** — one-shot at project start. Produces the blueprints.
-- **Iteration** — repeated forever, one user story at a time. Produces the software.
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  css: [
+    '@semplice-studio/pa-design-system/tokens.css',
+    '@semplice-studio/pa-design-system/style.css',
+  ],
+})
+```
 
-A third theme runs across both: **knowledge accumulation**. Every skill writes back to `docs/`, so every future agent session starts with more context, not less.
+```vue
+<script setup lang="ts">
+import { PaButton, PaInput } from '@semplice-studio/pa-design-system'
+</script>
 
-### Setup phase (one-shot)
+<template>
+  <PaInput v-model="name" label="Nome" />
+  <PaButton @click="submit">Invia</PaButton>
+</template>
+```
 
-| SDLC phase | Skill | Artifact | Inputs the next phase will consume |
-|---|---|---|---|
-| Requirements / discovery | `/init-prd` (product) or `/init-library` (npm package) | `docs/prd.md` + populated `CLAUDE.md` | Personas/package surface, scope, stack, constraints |
-| UX / visual design | `/import-design-system` | `docs/frontend/design-system.md` + token files + Figma→component recognition rules | Components available, token names, icon registry |
-| System / data design | `/data-model` | `docs/data-model.md` + ORM schema sketch | Entities, relationships, indexes, RLS policies *(skip for library projects)* |
+## Quickstart — plain Vue + Vite
 
-After setup: the project has a complete blueprint. No production code yet — every downstream decision will be anchored to these artifacts.
+```ts
+// main.ts
+import '@semplice-studio/pa-design-system/tokens.css'
+import '@semplice-studio/pa-design-system/style.css'
+```
 
-### Iteration phase (repeated per release)
+Then import components where you use them — no plugin, no global registration.
 
-| SDLC phase | Skill | Artifact | Notes |
-|---|---|---|---|
-| Sprint planning | `/user-story <topic>` | `docs/user-stories/user-stories-vX.X.md` | One file per release. Stories scoped, AC testable, files listed. |
-| Implementation | `/user-story implement vX.X` | Source code + ticked AC | Per-step approval. Calls `/ui-composer` and `/figma-component` as sub-skills when needed. |
-| Component design (sub-skill) | `/figma-component <Name> <figma-url>` | Component file + design-system.md update (status 🟡 → ✅) | Only when a story needs a new atom. |
-| Page composition (sub-skill) | `/ui-composer` | Page file with mock data, AC checklist | Only when a story scaffolds a page from existing atoms. |
-| Review / merge | (manual) | git commit per story | One bundled commit per story; commit message follows `feat(area): <summary> (US-NN)`. |
+## Imports
 
-After each iteration: the codebase grows and the docs grow with it. The next agent session has more context than the previous one — never less.
+```ts
+// barrel — tree-shaken by your bundler
+import { PaButton, PaModal } from '@semplice-studio/pa-design-system'
 
-### Cross-cutting — continuous documentation
+// or per-component subpath
+import { PaButton } from '@semplice-studio/pa-design-system/components/PaButton'
+```
 
-Nothing lives in tribal knowledge. Every skill writes to `docs/`:
+Every component also exports its prop/option types (`PaButtonProps`, `PaSelectOption`, …).
 
-- `/figma-component` updates `docs/frontend/design-system.md` (component status, prop tables, recognition rules)
-- `/user-story implement` ticks acceptance criteria (✅) in the story file and proposes commits
-- New conventions discovered during implementation get appended to the relevant `docs/tech/*.md`
-- `/data-model` is re-runnable when entities change — diffs against the existing model
+## Stylesheets
 
-This is what makes the methodology agent-ready: the project state lives in markdown, not in anyone's head.
+| Entry | Contents |
+|---|---|
+| `tokens.css` | Design tokens (`--pa-color-*`, `--pa-space-*`, `--pa-font-*`, …) + bundled Inter / Roboto Mono `@font-face` — no separate font loading needed. Auto-imports `layout.css`. |
+| `layout.css` | `.pa-*` layout/composition utilities (also importable standalone) |
+| `style.css` | Compiled component styles |
 
-### Typical use case — bootstrapping a Vue design system as an npm package
+## Theming
 
-A concrete walkthrough mapping each step to its SDLC phase:
+All component styling resolves through CSS custom properties — override them at the consumer level, no build-time config:
 
-**Day 1 morning — Requirements**
+```css
+:root {
+  --pa-color-primary: #0a5fad;
+}
 ```
-git clone <template> dx-design-system && cd dx-design-system && claude
-> /init-library
-```
-The agent Q&As through 18 questions (package name, target framework, build tool, peer deps, distribution shape). ~30 min later: `docs/prd.md` is filled with the library spec, `CLAUDE.md` is populated, optional `package.json` + `tsconfig.json` + build config are scaffolded. *Phase: Requirements engineering.*
 
-**Day 1 afternoon — Visual design**
-```
-> /import-design-system
-```
-The agent extracts color/typography/spacing/radius tokens from Figma, enumerates atoms and composed components, builds the icon registry. Output: `docs/frontend/design-system.md` (every component marked 🟡 designed, awaiting implementation), `src/tokens/*.css`, Figma→component recognition rules seeded. *Phase: UX/visual design.*
+## Component reference & agent docs
 
-**(Skip `/data-model` — libraries have no data model.)**
+These docs ship **inside the package** (`node_modules/@semplice-studio/pa-design-system/docs/`), version-locked to the installed release — point your coding agent at them:
 
-**Day 2 morning — Sprint planning**
-```
-> /user-story tokens wiring + 5 base atoms (Button, Input, Badge, Tag, Icon) + Histoire setup
-```
-The agent Q&As scope, AC, file paths, dependencies. Output: `docs/user-stories/user-stories-v1.1.md` with ~6 user stories (US-01 → US-06), each with concrete AC and file paths. *Phase: Sprint planning.*
+- [`docs/public-surface.md`](docs/public-surface.md) — export table: every component with its props/v-model/slots/emits summary
+- [`docs/page-composition-examples.md`](docs/page-composition-examples.md) — page skeleton + section patterns distilled from the reference templates
+- [`docs/layouts.md`](docs/layouts.md) — the `.pa-*` layout utility classes
+- [`docs/design-system.md`](docs/design-system.md) — design tokens + component registry
 
-**Day 2-3 — Implementation**
-```
-> /user-story implement v1.1
-```
-For each US-NN: agent proposes a plan → user approves → agent calls `/figma-component UiButton <figma-url>` as a sub-skill → component generated → `docs/frontend/design-system.md` updated (status 🟡 → ✅) → AC ticked → commit suggested (`feat(button): add UiButton with primary/outline/ghost variants (US-01)`). Loop continues for each story. *Phase: Implementation, with continuous documentation woven in.*
+For live examples, run the Histoire playground (see Development).
 
-**Day 4 — Next iteration**
-```
-> /user-story Composed components: Card, Header, Sidebar
-```
-The agent reads `CLAUDE.md`, `docs/prd.md`, `docs/frontend/design-system.md` (now with 5 ✅ atoms it can compose with), and the previous user-stories file as structural reference. Phase B repeats — but the knowledge base is bigger and the agent's plans are sharper. *Phase: next iteration of sprint planning + implementation.*
+Conventions that apply across the library:
 
-The compounding effect is the point: by Day 30, when you onboard a teammate (or a fresh agent session), they don't ask "where do I start?" — they read `CLAUDE.md`, follow the references, and have the project's full context in 15 minutes.
+- **Shared form anatomy**: form components mirror `PaInput`'s `label` / `helperText` / `error` / `valid` / `required` / `disabled` / `readonly` set
+- **Date/time pickers**: values normalized to *local* midnight (never UTC); with `name` set, a hidden input serializes for native form posts
+- **Responsive components use container queries** — they reflow inside narrow sidebars regardless of viewport
+- **SPA routing**: nav components (`PaBreadcrumb`, headers, footer) emit preventable payloads — call `preventDefault()` and route with your router
 
-## What's in the box
+## Development
 
+```bash
+pnpm install
+pnpm dev          # Histoire playground
+pnpm test         # Vitest (watch)
+pnpm build        # library build + type emit
+pnpm typecheck
+pnpm lint
 ```
-template/
-├── AUDIT.md                  ← what's reusable methodology vs Sapra-specific
-├── CLAUDE.md                 ← skeleton with {{TODO}} slots filled by skills
-├── .claude/skills/
-│   ├── init-prd/             ← NEW: bootstrap a product/app project
-│   ├── init-library/         ← NEW: bootstrap a library/npm package project
-│   ├── import-design-system/ ← NEW: Figma → design-system.md + tokens
-│   ├── data-model/           ← NEW: entities + relationships → data-model.md
-│   ├── user-story/           ← LIFTED from Sapra (deparametrized)
-│   ├── ui-composer/          ← LIFTED from Sapra (deparametrized)
-│   └── figma-component/      ← LIFTED from Sapra (deparametrized, now a skill)
-└── docs/
-    ├── workflow.md           ← Plan-first/Develop-second workflow rules
-    ├── prd.md                ← empty template, filled by /init-prd
-    ├── data-model.md         ← empty template, filled by /data-model
-    ├── frontend/
-    │   └── design-system.md  ← empty template, filled by /import-design-system
-    └── user-stories/         ← created per release by /user-story
-```
-
-## How to use
-
-1. Copy `template/` contents to a fresh repo (the `template/` folder itself is for reference inside Sapra)
-2. Open it in Claude Code — the agent reads `CLAUDE.md` on session start
-3. Decide: is this a **product** or a **library**?
-   - Product/app → run `/init-prd`. Q&A through tech stack, product surface, constraints
-   - Library (npm package, design system, SDK) → run `/init-library`. Q&A through package surface, peer deps, build, distribution
-4. Run `/import-design-system` once your designer has a Figma file ready
-5. Run `/data-model` to lock down entities before any backend work — **skip for library projects**
-6. From there: `/user-story` per feature/component, then `implement vX.X` per release
 
-## Stack-agnostic — but with framework hooks
+Releases use [changesets](https://github.com/changesets/changesets): `pnpm changeset` → `pnpm changeset version` → commit → `pnpm release` → `git push --follow-tags`. Published publicly on npmjs.com (`publishConfig.access: public`); publishing requires npm 2FA.
 
-The methodology is stack-agnostic. The `/ui-composer` and `/figma-component` skills, however, need framework-specific references (which Vue patterns? React? Svelte?). They read `CLAUDE.md` to discover the stack chosen by `/init-prd`, then look up the right reference under `.claude/skills/<skill>/references/frameworks/`. v0 of this template ships Vue/Nuxt as the only framework reference (lifted from Sapra) — adding React/Next is a matter of dropping a new file in `references/frameworks/`.
+## License
 
-See `AUDIT.md` for the full breakdown of what was reusable, what was project-specific, and what needed generalization.
+[EUPL-1.2](LICENSE) © Semplice

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;;;;;"}