@semplice-studio/pa-design-system 0.1.0

package/dist/components/PaTitleBar/PaTitleBar.vue2.js

@@ -0,0 +1,178 @@
+import { defineComponent as V, useModel as A, computed as h, ref as _, watch as U, onBeforeUnmount as z, openBlock as s, createElementBlock as u, normalizeClass as w, createElementVNode as y, createBlock as H, resolveDynamicComponent as S, withCtx as F, createTextVNode as P, toDisplayString as g, createCommentVNode as b, renderSlot as j, withKeys as i, withModifiers as c, createVNode as q, Fragment as G, renderList as J, mergeModels as Q, nextTick as L } from "vue";
+import W from "../PaIcon/PaIcon.vue.js";
+const X = { class: "pa-title-bar__title-block" }, Y = {
+  key: 0,
+  class: "pa-title-bar__subtitle"
+}, Z = {
+  key: 0,
+  class: "pa-title-bar__actions"
+}, ee = ["aria-label", "aria-expanded", "onKeydown"], te = ["disabled", "onClick", "onKeydown"];
+let ne = 0;
+function ae() {
+  return ++ne;
+}
+const re = /* @__PURE__ */ V({
+  __name: "PaTitleBar",
+  props: /* @__PURE__ */ Q({
+    title: {},
+    titleLevel: { default: 3 },
+    subtitle: {},
+    variant: { default: "dark" },
+    menuItems: { default: () => [] },
+    menuLabel: { default: "Apri menu" }
+  }, {
+    menuOpen: { type: Boolean, default: !1 },
+    menuOpenModifiers: {}
+  }),
+  emits: ["update:menuOpen"],
+  setup(r) {
+    const d = r, l = A(r, "menuOpen"), E = h(() => `h${d.titleLevel}`), I = `pa-title-bar-${ae()}`, M = `${I}__kebab`, D = `${I}__menu`, p = _(null), B = _(null), v = _([]);
+    function K(e, n) {
+      e instanceof HTMLButtonElement && (v.value[n] = e);
+    }
+    function O() {
+      L(() => {
+        var e;
+        return (e = B.value) == null ? void 0 : e.focus();
+      });
+    }
+    function C() {
+      l.value = !1, O();
+    }
+    function R() {
+      l.value ? l.value = !1 : (l.value = !0, L(() => {
+        var n;
+        const e = d.menuItems.findIndex((t) => !t.disabled);
+        e >= 0 && ((n = v.value[e]) == null || n.focus());
+      }));
+    }
+    function T(e) {
+      var n;
+      e.disabled || ((n = e.onClick) == null || n.call(e), l.value = !1);
+    }
+    function x() {
+      return d.menuItems.map((e, n) => e.disabled ? -1 : n).filter((e) => e >= 0);
+    }
+    function f(e) {
+      var n;
+      e !== void 0 && ((n = v.value[e]) == null || n.focus());
+    }
+    function m(e, n) {
+      const t = x();
+      if (t.length === 0) return;
+      const o = t.indexOf(n);
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          const a = o < 0 ? t[0] : t[(o + 1) % t.length];
+          f(a);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          const a = o < 0 ? t[t.length - 1] : t[(o - 1 + t.length) % t.length];
+          f(a);
+          break;
+        }
+        case "Home": {
+          e.preventDefault(), f(t[0]);
+          break;
+        }
+        case "End": {
+          e.preventDefault(), f(t[t.length - 1]);
+          break;
+        }
+      }
+    }
+    function k(e) {
+      if (!l.value) return;
+      const n = e.target;
+      n && p.value && !p.value.contains(n) && (l.value = !1);
+    }
+    U(
+      l,
+      (e) => {
+        e ? document.addEventListener("mousedown", k) : document.removeEventListener("mousedown", k);
+      },
+      { immediate: !0 }
+    ), z(() => {
+      document.removeEventListener("mousedown", k);
+    });
+    const $ = h(() => d.menuItems.length > 0), N = h(() => l.value && $.value);
+    return (e, n) => (s(), u("div", {
+      ref_key: "wrapperRef",
+      ref: p,
+      class: w(["pa-title-bar-wrapper", `pa-title-bar-wrapper--${r.variant}`])
+    }, [
+      y("header", {
+        class: w(["pa-title-bar", `pa-title-bar--${r.variant}`])
+      }, [
+        y("div", X, [
+          (s(), H(S(E.value), { class: "pa-title-bar__title" }, {
+            default: F(() => [
+              P(g(r.title), 1)
+            ]),
+            _: 1
+          })),
+          r.subtitle ? (s(), u("p", Y, g(r.subtitle), 1)) : b("", !0)
+        ]),
+        e.$slots.actions ? (s(), u("div", Z, [
+          j(e.$slots, "actions", {}, void 0, !0)
+        ])) : b("", !0),
+        $.value ? (s(), u("button", {
+          key: 1,
+          id: M,
+          ref_key: "kebabRef",
+          ref: B,
+          type: "button",
+          class: w(["pa-title-bar__kebab", { "pa-title-bar__kebab--open": l.value }]),
+          "aria-label": r.menuLabel,
+          "aria-haspopup": "menu",
+          "aria-expanded": l.value,
+          "aria-controls": D,
+          onClick: R,
+          onKeydown: i(c(C, ["prevent"]), ["esc"])
+        }, [
+          q(W, {
+            name: "dots-three-vertical",
+            size: "sm"
+          })
+        ], 42, ee)) : b("", !0)
+      ], 2),
+      N.value ? (s(), u("ul", {
+        key: 0,
+        id: D,
+        class: "pa-title-bar__menu",
+        role: "menu",
+        "aria-labelledby": M
+      }, [
+        (s(!0), u(G, null, J(r.menuItems, (t, o) => (s(), u("li", {
+          key: o,
+          class: "pa-title-bar__menu-item",
+          role: "none"
+        }, [
+          y("button", {
+            ref_for: !0,
+            ref: (a) => K(a, o),
+            class: "pa-title-bar__menu-item-btn",
+            type: "button",
+            role: "menuitem",
+            disabled: t.disabled,
+            onClick: (a) => T(t),
+            onKeydown: [
+              i(c(C, ["prevent"]), ["esc"]),
+              i(c((a) => m(a, o), ["prevent"]), ["down"]),
+              i(c((a) => m(a, o), ["prevent"]), ["up"]),
+              i(c((a) => m(a, o), ["prevent"]), ["home"]),
+              i(c((a) => m(a, o), ["prevent"]), ["end"])
+            ]
+          }, g(t.label), 41, te)
+        ]))), 128))
+      ])) : b("", !0)
+    ], 2));
+  }
+});
+export {
+  re as default
+};
+//# sourceMappingURL=PaTitleBar.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaTitleBar.vue2.js","sources":["../../../src/components/PaTitleBar/PaTitleBar.vue"],"sourcesContent":["<script lang=\"ts\">\nlet titleBarUid = 0\nfunction nextTitleBarId() {\n  return ++titleBarUid\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\n\nexport type PaTitleBarVariant = 'dark' | 'light'\n\nexport interface PaTitleBarMenuItem {\n  label: string\n  onClick?: () => void\n  disabled?: boolean\n}\n\nexport interface PaTitleBarProps {\n  title: string\n  titleLevel?: 1 | 2 | 3 | 4 | 5 | 6\n  subtitle?: string\n  variant?: PaTitleBarVariant\n  menuItems?: PaTitleBarMenuItem[]\n  menuLabel?: string\n}\n\nconst props = withDefaults(defineProps<PaTitleBarProps>(), {\n  titleLevel: 3,\n  variant: 'dark',\n  menuItems: () => [],\n  menuLabel: 'Apri menu',\n})\n\nconst menuOpen = defineModel<boolean>('menuOpen', { default: false })\n\nconst titleTag = computed(() => `h${props.titleLevel}` as const)\n\nconst baseId = `pa-title-bar-${nextTitleBarId()}`\nconst kebabId = `${baseId}__kebab`\nconst menuId = `${baseId}__menu`\n\nconst wrapperRef = ref<HTMLDivElement | null>(null)\nconst kebabRef = ref<HTMLButtonElement | null>(null)\nconst menuItemRefs = ref<HTMLButtonElement[]>([])\n\nfunction setMenuItemRef(el: unknown, index: number) {\n  if (el instanceof HTMLButtonElement) {\n    menuItemRefs.value[index] = el\n  }\n}\n\nfunction focusKebab() {\n  nextTick(() => kebabRef.value?.focus())\n}\n\nfunction closeMenu() {\n  menuOpen.value = false\n  focusKebab()\n}\n\nfunction toggleMenu() {\n  if (menuOpen.value) {\n    menuOpen.value = false\n  } else {\n    menuOpen.value = true\n    nextTick(() => {\n      const firstEnabled = props.menuItems.findIndex((i) => !i.disabled)\n      if (firstEnabled >= 0) {\n        menuItemRefs.value[firstEnabled]?.focus()\n      }\n    })\n  }\n}\n\nfunction onMenuItemClick(item: PaTitleBarMenuItem) {\n  if (item.disabled) return\n  item.onClick?.()\n  menuOpen.value = false\n}\n\nfunction enabledIndices() {\n  return props.menuItems\n    .map((item, i) => (item.disabled ? -1 : i))\n    .filter((i) => i >= 0)\n}\n\nfunction focusByIndex(index: number | undefined) {\n  if (index === undefined) return\n  menuItemRefs.value[index]?.focus()\n}\n\nfunction handleMenuKeyDown(event: KeyboardEvent, currentIndex: number) {\n  const enabled = enabledIndices()\n  if (enabled.length === 0) return\n  const pos = enabled.indexOf(currentIndex)\n  switch (event.key) {\n    case 'ArrowDown': {\n      event.preventDefault()\n      const next = pos < 0 ? enabled[0] : enabled[(pos + 1) % enabled.length]\n      focusByIndex(next)\n      break\n    }\n    case 'ArrowUp': {\n      event.preventDefault()\n      const prev =\n        pos < 0\n          ? enabled[enabled.length - 1]\n          : enabled[(pos - 1 + enabled.length) % enabled.length]\n      focusByIndex(prev)\n      break\n    }\n    case 'Home': {\n      event.preventDefault()\n      focusByIndex(enabled[0])\n      break\n    }\n    case 'End': {\n      event.preventDefault()\n      focusByIndex(enabled[enabled.length - 1])\n      break\n    }\n  }\n}\n\nfunction handleDocumentMouseDown(event: MouseEvent) {\n  if (!menuOpen.value) return\n  const target = event.target as Node | null\n  if (target && wrapperRef.value && !wrapperRef.value.contains(target)) {\n    menuOpen.value = false\n  }\n}\n\nwatch(\n  menuOpen,\n  (open) => {\n    if (open) {\n      document.addEventListener('mousedown', handleDocumentMouseDown)\n    } else {\n      document.removeEventListener('mousedown', handleDocumentMouseDown)\n    }\n  },\n  { immediate: true },\n)\n\nonBeforeUnmount(() => {\n  document.removeEventListener('mousedown', handleDocumentMouseDown)\n})\n\nconst hasMenu = computed(() => props.menuItems.length > 0)\nconst showDropdown = computed(() => menuOpen.value && hasMenu.value)\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    class=\"pa-title-bar-wrapper\"\n    :class=\"`pa-title-bar-wrapper--${variant}`\"\n  >\n    <header class=\"pa-title-bar\" :class=\"`pa-title-bar--${variant}`\">\n      <div class=\"pa-title-bar__title-block\">\n        <component :is=\"titleTag\" class=\"pa-title-bar__title\">{{ title }}</component>\n        <p v-if=\"subtitle\" class=\"pa-title-bar__subtitle\">{{ subtitle }}</p>\n      </div>\n\n      <div v-if=\"$slots.actions\" class=\"pa-title-bar__actions\">\n        <slot name=\"actions\" />\n      </div>\n\n      <button\n        v-if=\"hasMenu\"\n        :id=\"kebabId\"\n        ref=\"kebabRef\"\n        type=\"button\"\n        class=\"pa-title-bar__kebab\"\n        :class=\"{ 'pa-title-bar__kebab--open': menuOpen }\"\n        :aria-label=\"menuLabel\"\n        aria-haspopup=\"menu\"\n        :aria-expanded=\"menuOpen\"\n        :aria-controls=\"menuId\"\n        @click=\"toggleMenu\"\n        @keydown.esc.prevent=\"closeMenu\"\n      >\n        <PaIcon name=\"dots-three-vertical\" size=\"sm\" />\n      </button>\n    </header>\n\n    <ul\n      v-if=\"showDropdown\"\n      :id=\"menuId\"\n      class=\"pa-title-bar__menu\"\n      role=\"menu\"\n      :aria-labelledby=\"kebabId\"\n    >\n      <li\n        v-for=\"(item, index) in menuItems\"\n        :key=\"index\"\n        class=\"pa-title-bar__menu-item\"\n        role=\"none\"\n      >\n        <button\n          :ref=\"(el) => setMenuItemRef(el, index)\"\n          class=\"pa-title-bar__menu-item-btn\"\n          type=\"button\"\n          role=\"menuitem\"\n          :disabled=\"item.disabled\"\n          @click=\"onMenuItemClick(item)\"\n          @keydown.esc.prevent=\"closeMenu\"\n          @keydown.down.prevent=\"handleMenuKeyDown($event, index)\"\n          @keydown.up.prevent=\"handleMenuKeyDown($event, index)\"\n          @keydown.home.prevent=\"handleMenuKeyDown($event, index)\"\n          @keydown.end.prevent=\"handleMenuKeyDown($event, index)\"\n        >\n          {{ item.label }}\n        </button>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<style scoped>\n.pa-title-bar-wrapper {\n  container-type: inline-size;\n}\n\n.pa-title-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 60px;\n  padding: 8px 24px;\n  border-radius: var(--pa-radius-smooth) var(--pa-radius-smooth) 0 0;\n}\n\n.pa-title-bar--dark {\n  background-color: var(--pa-color-primary);\n  --pa-title-bar-title-color: var(--pa-color-bg-white);\n  --pa-title-bar-subtitle-color: var(--pa-color-bg-white);\n  --pa-title-bar-action-color: var(--pa-color-bg-white);\n  --pa-title-bar-kebab-color: var(--pa-color-bg-white);\n}\n\n.pa-title-bar--light {\n  background-color: var(--pa-color-bg-primary-light-40);\n  --pa-title-bar-title-color: #000;\n  --pa-title-bar-subtitle-color: var(--pa-color-text-secondary-gray);\n  --pa-title-bar-action-color: var(--pa-color-primary);\n  --pa-title-bar-kebab-color: var(--pa-color-primary);\n}\n\n.pa-title-bar__title-block {\n  flex: 1 0 0;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--pa-space-2xs);\n}\n\n.pa-title-bar__title {\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-title-bar-title-color);\n}\n\n.pa-title-bar__subtitle {\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-title-bar-subtitle-color);\n}\n\n.pa-title-bar__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--pa-space-xs);\n}\n\n.pa-title-bar__kebab {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  padding: 0;\n  border: 0;\n  border-radius: var(--pa-radius-smooth);\n  background: transparent;\n  color: var(--pa-title-bar-kebab-color);\n  cursor: pointer;\n}\n\n.pa-title-bar__kebab:focus-visible {\n  outline: var(--pa-border-sm) solid var(--pa-color-primary-focus-border);\n  outline-offset: 2px;\n}\n\n.pa-title-bar__kebab--open {\n  background-color: var(--pa-color-primary-pressed);\n  color: var(--pa-color-bg-white);\n}\n\n.pa-title-bar__menu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: var(--pa-color-bg-white);\n}\n\n.pa-title-bar__menu-item {\n  display: block;\n  margin-bottom: -1px;\n}\n\n.pa-title-bar__menu-item:first-child .pa-title-bar__menu-item-btn {\n  border-radius: var(--pa-radius-smooth) var(--pa-radius-smooth) 0 0;\n}\n\n.pa-title-bar__menu-item:last-child {\n  margin-bottom: 0;\n}\n\n.pa-title-bar__menu-item:last-child .pa-title-bar__menu-item-btn {\n  border-radius: 0 0 var(--pa-radius-smooth) var(--pa-radius-smooth);\n}\n\n.pa-title-bar__menu-item-btn {\n  display: block;\n  width: 100%;\n  min-height: 56px;\n  padding: 16px;\n  border: var(--pa-border-xs) solid var(--pa-color-bg-secondary-light-50);\n  background-color: var(--pa-color-bg-white);\n  color: var(--pa-color-text-secondary-gray);\n  font-family: var(--pa-font-family-base);\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 20px;\n  text-align: left;\n  cursor: pointer;\n}\n\n.pa-title-bar__menu-item-btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.pa-title-bar__menu-item-btn:focus-visible {\n  outline: var(--pa-border-sm) solid var(--pa-color-primary-focus-border);\n  outline-offset: -2px;\n}\n\n@container (max-width: 720px) {\n  .pa-title-bar {\n    padding: 8px 8px 8px 16px;\n  }\n\n  .pa-title-bar__subtitle {\n    display: none;\n  }\n\n  .pa-title-bar__actions {\n    display: none;\n  }\n\n  .pa-title-bar__kebab {\n    display: inline-flex;\n  }\n}\n</style>\n"],"names":["titleBarUid","nextTitleBarId","props","__props","menuOpen","_useModel","titleTag","computed","baseId","kebabId","menuId","wrapperRef","ref","kebabRef","menuItemRefs","setMenuItemRef","el","index","focusKebab","nextTick","_a","closeMenu","toggleMenu","firstEnabled","i","onMenuItemClick","item","enabledIndices","focusByIndex","handleMenuKeyDown","event","currentIndex","enabled","pos","next","prev","handleDocumentMouseDown","target","watch","open","onBeforeUnmount","hasMenu","showDropdown","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_1","_openBlock","_createBlock","_resolveDynamicComponent","_hoisted_2","_toDisplayString","$slots","_hoisted_3","_renderSlot","_ctx","_createVNode","PaIcon","_Fragment","_renderList","$event","_hoisted_5"],"mappings":"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"}

package/dist/components/PaTitleBar/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as PaTitleBar } from './PaTitleBar.vue';
+export type { PaTitleBarProps, PaTitleBarVariant, PaTitleBarMenuItem, } from './PaTitleBar.vue';

package/dist/components/PaTitleBar/index.js

@@ -0,0 +1,6 @@
+import { default as t, default as f } from "./PaTitleBar.vue.js";
+export {
+  t as PaTitleBar,
+  f as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/PaTitleBar/index.js.map

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

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

@@ -0,0 +1,27 @@
+export declare function nextPaToggleId(): string;
+export interface PaToggleProps {
+    label?: string;
+    id?: string;
+    name?: string;
+    value?: string;
+    helperText?: string;
+    error?: string | boolean;
+    valid?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+}
+declare const _default: import("vue").DefineComponent<PaToggleProps & {
+    modelValue?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<PaToggleProps & {
+    modelValue?: boolean;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    error: string | boolean;
+    disabled: boolean;
+    valid: boolean;
+    required: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/PaToggle/PaToggle.vue.js

@@ -0,0 +1,10 @@
+import o from "./PaToggle.vue2.js";
+import { nextPaToggleId as f } from "./PaToggle.vue2.js";
+/* empty css              */
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const d = /* @__PURE__ */ t(o, [["__scopeId", "data-v-02d5bd5d"]]);
+export {
+  d as default,
+  f as nextPaToggleId
+};
+//# sourceMappingURL=PaToggle.vue.js.map

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

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

package/dist/components/PaToggle/PaToggle.vue2.js

@@ -0,0 +1,79 @@
+import { defineComponent as k, useModel as B, computed as l, openBlock as i, createElementBlock as n, normalizeClass as s, createElementVNode as u, toDisplayString as p, createCommentVNode as f, mergeModels as x } from "vue";
+const C = { class: "pa-toggle__row" }, I = ["id", "aria-checked", "aria-labelledby", "aria-required", "aria-invalid", "aria-describedby", "disabled", "name", "value"], M = ["id"], T = ["id"];
+let V = 0;
+function q() {
+  return `pa-toggle-${++V}`;
+}
+const A = /* @__PURE__ */ k({
+  __name: "PaToggle",
+  props: /* @__PURE__ */ x({
+    label: {},
+    id: {},
+    name: {},
+    value: {},
+    helperText: {},
+    error: { type: [String, Boolean], default: !1 },
+    valid: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  }, {
+    modelValue: { type: Boolean, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const a = e, o = B(e, "modelValue"), y = q(), d = l(() => a.id ?? y), v = l(() => `${d.value}-label`), c = l(() => `${d.value}-msg`), t = l(() => !!a.error), g = l(() => a.valid && !t.value), h = l(
+      () => typeof a.error == "string" && a.error.length > 0 ? a.error : null
+    ), _ = l(
+      () => !t.value && !g.value && a.helperText ? a.helperText : null
+    ), r = l(() => h.value ?? _.value);
+    function m() {
+      a.disabled || (o.value = !o.value);
+    }
+    return ($, b) => (i(), n("div", {
+      class: s([
+        "pa-toggle",
+        {
+          "pa-toggle--error": t.value,
+          "pa-toggle--valid": g.value
+        }
+      ])
+    }, [
+      u("div", C, [
+        u("button", {
+          type: "button",
+          role: "switch",
+          id: d.value,
+          "aria-checked": o.value,
+          "aria-labelledby": e.label ? v.value : void 0,
+          "aria-required": e.required || void 0,
+          "aria-invalid": t.value || void 0,
+          "aria-describedby": r.value ? c.value : void 0,
+          disabled: e.disabled,
+          name: e.name,
+          value: e.value,
+          class: s(["pa-toggle__button", { "pa-toggle__button--on": o.value }]),
+          onClick: m
+        }, [...b[0] || (b[0] = [
+          u("span", { class: "pa-toggle__knob" }, null, -1)
+        ])], 10, I),
+        e.label ? (i(), n("span", {
+          key: 0,
+          id: v.value,
+          class: "pa-toggle__label",
+          onClick: m
+        }, p(e.label), 9, M)) : f("", !0)
+      ]),
+      r.value ? (i(), n("div", {
+        key: 0,
+        id: c.value,
+        class: s(["pa-toggle__message", { "pa-toggle__message--error": t.value }])
+      }, p(r.value), 11, T)) : f("", !0)
+    ], 2));
+  }
+});
+export {
+  A as default,
+  q as nextPaToggleId
+};
+//# sourceMappingURL=PaToggle.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaToggle.vue2.js","sources":["../../../src/components/PaToggle/PaToggle.vue"],"sourcesContent":["<script lang=\"ts\">\nlet uid = 0\nexport function nextPaToggleId() {\n  return `pa-toggle-${++uid}`\n}\n\nexport interface PaToggleProps {\n  label?: string\n  id?: string\n  name?: string\n  value?: string\n  helperText?: string\n  error?: string | boolean\n  valid?: boolean\n  required?: boolean\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst props = withDefaults(defineProps<PaToggleProps>(), {\n  error: false,\n  valid: false,\n  required: false,\n  disabled: false,\n})\n\nconst model = defineModel<boolean>({ default: false })\n\nconst generatedId = nextPaToggleId()\nconst buttonId = computed(() => props.id ?? generatedId)\nconst labelId = computed(() => `${buttonId.value}-label`)\nconst messageId = computed(() => `${buttonId.value}-msg`)\n\nconst errorActive = computed(() => Boolean(props.error))\nconst validActive = computed(() => props.valid && !errorActive.value)\n\nconst errorMessage = computed(() =>\n  typeof props.error === 'string' && props.error.length > 0 ? props.error : null,\n)\nconst helperMessage = computed(() =>\n  !errorActive.value && !validActive.value && props.helperText ? props.helperText : null,\n)\nconst message = computed(() => errorMessage.value ?? helperMessage.value)\n\nfunction toggle() {\n  if (props.disabled) return\n  model.value = !model.value\n}\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'pa-toggle',\n      {\n        'pa-toggle--error': errorActive,\n        'pa-toggle--valid': validActive,\n      },\n    ]\"\n  >\n    <div class=\"pa-toggle__row\">\n      <button\n        type=\"button\"\n        role=\"switch\"\n        :id=\"buttonId\"\n        :aria-checked=\"model\"\n        :aria-labelledby=\"label ? labelId : undefined\"\n        :aria-required=\"required || undefined\"\n        :aria-invalid=\"errorActive || undefined\"\n        :aria-describedby=\"message ? messageId : undefined\"\n        :disabled=\"disabled\"\n        :name=\"name\"\n        :value=\"value\"\n        :class=\"['pa-toggle__button', { 'pa-toggle__button--on': model }]\"\n        @click=\"toggle\"\n      >\n        <span class=\"pa-toggle__knob\" />\n      </button>\n      <span\n        v-if=\"label\"\n        :id=\"labelId\"\n        class=\"pa-toggle__label\"\n        @click=\"toggle\"\n      >{{ label }}</span>\n    </div>\n    <div\n      v-if=\"message\"\n      :id=\"messageId\"\n      :class=\"['pa-toggle__message', { 'pa-toggle__message--error': errorActive }]\"\n    >\n      {{ message }}\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.pa-toggle {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--pa-space-2xs);\n  font-family: var(--pa-font-family-base);\n}\n\n.pa-toggle__row {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--pa-space-xs);\n}\n\n.pa-toggle__button {\n  position: relative;\n  flex-shrink: 0;\n  width: 50px;\n  height: 24px;\n  padding: 0;\n  margin: 0;\n  border: var(--pa-border-xs) solid var(--pa-color-neutral-gray);\n  border-radius: 12px;\n  background: var(--pa-color-bg-white);\n  cursor: pointer;\n  transition: background-color 120ms ease, border-color 120ms ease;\n}\n\n.pa-toggle__button:focus { outline: none; }\n\n.pa-toggle__button:focus-visible {\n  border-color: var(--pa-color-primary-focus-border);\n  outline: var(--pa-border-xs) solid var(--pa-color-primary-focus-border);\n  outline-offset: 2px;\n}\n\n.pa-toggle__button:hover:not(:disabled) {\n  border-color: var(--pa-color-primary-hover);\n}\n\n.pa-toggle__button--on {\n  background: var(--pa-color-primary);\n  border-color: var(--pa-color-primary);\n}\n\n.pa-toggle__button--on:hover:not(:disabled) {\n  background: var(--pa-color-primary-hover);\n  border-color: var(--pa-color-primary-hover);\n}\n\n.pa-toggle__button--on:focus-visible {\n  background: var(--pa-color-primary);\n  border-color: var(--pa-color-primary-focus-border);\n}\n\n.pa-toggle__button:disabled {\n  cursor: not-allowed;\n  background: var(--pa-color-bg-disabled-gray);\n  border-color: var(--pa-color-bg-disabled-gray);\n}\n\n.pa-toggle--error .pa-toggle__button:not(:disabled) {\n  border-color: var(--pa-color-error);\n}\n\n.pa-toggle--valid .pa-toggle__button:not(:disabled) {\n  border-color: var(--pa-color-success);\n}\n\n.pa-toggle__knob {\n  position: absolute;\n  top: 3px;\n  left: 5px;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--pa-color-neutral-gray);\n  transition: left 150ms ease-in-out, background-color 120ms ease;\n}\n\n.pa-toggle__button:hover:not(:disabled) .pa-toggle__knob {\n  background: var(--pa-color-primary-hover);\n}\n\n.pa-toggle__button:focus-visible .pa-toggle__knob {\n  background: var(--pa-color-primary);\n}\n\n.pa-toggle__button--on .pa-toggle__knob {\n  left: 29px;\n  background: var(--pa-color-bg-white);\n}\n\n.pa-toggle__button--on:hover:not(:disabled) .pa-toggle__knob,\n.pa-toggle__button--on:focus-visible .pa-toggle__knob {\n  background: var(--pa-color-bg-white);\n}\n\n.pa-toggle__button:disabled .pa-toggle__knob {\n  background: var(--pa-color-text-disabled-gray);\n}\n\n.pa-toggle__label {\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-color-text-secondary-gray);\n  cursor: pointer;\n  user-select: none;\n}\n\n.pa-toggle__row:hover .pa-toggle__label {\n  color: var(--pa-color-text-dark-blue);\n}\n\n.pa-toggle:has(.pa-toggle__button:disabled) .pa-toggle__label {\n  color: var(--pa-color-text-disabled-gray);\n  cursor: not-allowed;\n}\n\n.pa-toggle__message {\n  font-size: var(--pa-font-label-helper-size);\n  line-height: var(--pa-font-label-helper-line-height);\n  font-weight: var(--pa-font-label-helper-weight);\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-toggle__message--error {\n  color: var(--pa-color-error);\n}\n</style>\n"],"names":["uid","nextPaToggleId","props","__props","model","_useModel","generatedId","buttonId","computed","labelId","messageId","errorActive","validActive","errorMessage","helperMessage","message","toggle","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_1","_hoisted_3","_hoisted_4"],"mappings":";;AACA,IAAIA,IAAM;AACH,SAASC,IAAiB;AAC/B,SAAO,aAAa,EAAED,CAAG;AAC3B;;;;;;;;;;;;;;;;;;;AAkBA,UAAME,IAAQC,GAORC,IAAQC,EAAoBF,GAAA,YAAmB,GAE/CG,IAAcL,EAAA,GACdM,IAAWC,EAAS,MAAMN,EAAM,MAAMI,CAAW,GACjDG,IAAUD,EAAS,MAAM,GAAGD,EAAS,KAAK,QAAQ,GAClDG,IAAYF,EAAS,MAAM,GAAGD,EAAS,KAAK,MAAM,GAElDI,IAAcH,EAAS,MAAM,EAAQN,EAAM,KAAM,GACjDU,IAAcJ,EAAS,MAAMN,EAAM,SAAS,CAACS,EAAY,KAAK,GAE9DE,IAAeL;AAAA,MAAS,MAC5B,OAAON,EAAM,SAAU,YAAYA,EAAM,MAAM,SAAS,IAAIA,EAAM,QAAQ;AAAA,IAAA,GAEtEY,IAAgBN;AAAA,MAAS,MAC7B,CAACG,EAAY,SAAS,CAACC,EAAY,SAASV,EAAM,aAAaA,EAAM,aAAa;AAAA,IAAA,GAE9Ea,IAAUP,EAAS,MAAMK,EAAa,SAASC,EAAc,KAAK;AAExE,aAASE,IAAS;AAChB,MAAId,EAAM,aACVE,EAAM,QAAQ,CAACA,EAAM;AAAA,IACvB;2BAIEa,EAyCM,OAAA;AAAA,MAxCH,OAAKC,EAAA;AAAA;;8BAA2DP,EAAA;AAAA,8BAAyCC,EAAA;AAAA,QAAA;AAAA;;MAQ1GO,EAwBM,OAxBNC,GAwBM;AAAA,QAvBJD,EAgBS,UAAA;AAAA,UAfP,MAAK;AAAA,UACL,MAAK;AAAA,UACJ,IAAIZ,EAAA;AAAA,UACJ,gBAAcH,EAAA;AAAA,UACd,mBAAiBD,EAAA,QAAQM,EAAA,QAAU;AAAA,UACnC,iBAAeN,EAAA,YAAY;AAAA,UAC3B,gBAAcQ,EAAA,SAAe;AAAA,UAC7B,oBAAkBI,EAAA,QAAUL,EAAA,QAAY;AAAA,UACxC,UAAUP,EAAA;AAAA,UACV,MAAMA,EAAA;AAAA,UACN,OAAOA,EAAA;AAAA,UACP,0DAAwDC,EAAA,MAAA,CAAK,CAAA;AAAA,UAC7D,SAAOY;AAAA,QAAA;UAERG,EAAgC,QAAA,EAA1B,OAAM,kBAAA,GAAiB,MAAA,EAAA;AAAA,QAAA;QAGvBhB,EAAA,cADRc,EAKmB,QAAA;AAAA;UAHhB,IAAIR,EAAA;AAAA,UACL,OAAM;AAAA,UACL,SAAOO;AAAA,QAAA,KACNb,EAAA,KAAK,GAAA,GAAAkB,CAAA;;MAGHN,EAAA,cADRE,EAMM,OAAA;AAAA;QAJH,IAAIP,EAAA;AAAA,QACJ,+DAA6DC,EAAA,OAAW,CAAA;AAAA,MAAA,KAEtEI,EAAA,KAAO,GAAA,IAAAO,CAAA;;;;"}

package/dist/components/PaToggle/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as PaToggle } from './PaToggle.vue';
+export type { PaToggleProps } from './PaToggle.vue';

package/dist/components/PaToggle/index.js

@@ -0,0 +1,6 @@
+import { default as f, default as l } from "./PaToggle.vue.js";
+export {
+  f as PaToggle,
+  l as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/PaToggle/index.js.map

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

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

@@ -0,0 +1,59 @@
+export declare function nextPaYearPickerId(): string;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    display?: "popover" | "inline";
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    error?: string | boolean;
+    valid?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    id?: string;
+    name?: string;
+    min?: Date | null;
+    max?: Date | null;
+    disabledYears?: (date: Date) => boolean;
+} & {
+    modelValue?: Date | null;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Date | null) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    display?: "popover" | "inline";
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    error?: string | boolean;
+    valid?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    id?: string;
+    name?: string;
+    min?: Date | null;
+    max?: Date | null;
+    disabledYears?: (date: Date) => boolean;
+} & {
+    modelValue?: Date | null;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Date | null) => any) | undefined;
+}>, {
+    error: string | boolean;
+    disabled: boolean;
+    placeholder: string;
+    valid: boolean;
+    required: boolean;
+    readonly: boolean;
+    min: Date | null;
+    max: Date | null;
+    display: "popover" | "inline";
+    disabledYears: (date: Date) => boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    suffix?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/PaYearPicker/PaYearPicker.vue.js

@@ -0,0 +1,10 @@
+import r from "./PaYearPicker.vue2.js";
+import { nextPaYearPickerId as p } from "./PaYearPicker.vue2.js";
+/* empty css                  */
+import o from "../../_virtual/_plugin-vue_export-helper.js";
+const c = /* @__PURE__ */ o(r, [["__scopeId", "data-v-fdc94580"]]);
+export {
+  c as default,
+  p as nextPaYearPickerId
+};
+//# sourceMappingURL=PaYearPicker.vue.js.map

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

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