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

package/dist/components/PaTabs/PaTabs.vue2.js

@@ -1,8 +1,6 @@
-import { defineComponent as D, useSlots as S, ref as z, computed as r, provide as L, onMounted as N, openBlock as c, createElementBlock as p, createElementVNode as u, normalizeClass as w, Fragment as V, renderList as F, createBlock as H, createCommentVNode as k, toDisplayString as M, renderSlot as P, nextTick as R } from "vue";
-import j from "../PaIcon/PaIcon.vue.js";
-const q = { class: "pa-tabs" }, G = ["aria-label"], J = ["id", "aria-selected", "aria-controls", "aria-disabled", "tabindex", "disabled", "onClick", "onKeydown"], O = { class: "pa-tabs__tab-content" }, Q = { class: "pa-tabs__tab-label" }, U = { class: "pa-tabs__panels" }, W = ["id", "aria-labelledby"], X = Symbol("PaTabsKey");
-let Y = 0;
-const ae = /* @__PURE__ */ D({
+import { defineComponent as D, useSlots as S, useId as z, ref as L, computed as r, provide as N, onMounted as V, openBlock as c, createElementBlock as p, createElementVNode as u, normalizeClass as w, Fragment as F, renderList as H, createBlock as M, createCommentVNode as k, toDisplayString as R, renderSlot as P, nextTick as j } from "vue";
+import q from "../PaIcon/PaIcon.vue.js";
+const G = { class: "pa-tabs" }, J = ["aria-label"], O = ["id", "aria-selected", "aria-controls", "aria-disabled", "tabindex", "disabled", "onClick", "onKeydown"], Q = { class: "pa-tabs__tab-content" }, U = { class: "pa-tabs__tab-label" }, W = { class: "pa-tabs__panels" }, X = ["id", "aria-labelledby"], Y = Symbol("PaTabsKey"), ae = /* @__PURE__ */ D({
   __name: "PaTabs",
   props: {
     tabs: { default: () => [] },
@@ -12,7 +10,7 @@ const ae = /* @__PURE__ */ D({
   },
   emits: ["update:activeId"],
   setup(b, { emit: T }) {
-    const v = b, I = T, _ = S(), m = `pa-tabs-${++Y}`, s = z([]), f = r(() => (v.tabs ?? []).length > 0), d = r(
+    const v = b, I = T, _ = S(), m = `pa-tabs-${z()}`, s = L([]), f = r(() => (v.tabs ?? []).length > 0), d = r(
       () => f.value ? v.tabs ?? [] : s.value
     ), l = r(() => {
       var a;
@@ -42,7 +40,7 @@ const ae = /* @__PURE__ */ D({
       y(e.id);
     }
     function C(e) {
-      R(() => {
+      j(() => {
         const t = document.getElementById(h(e));
         t == null || t.focus();
       });
@@ -81,7 +79,7 @@ const ae = /* @__PURE__ */ D({
     function B(e) {
       s.value = s.value.filter((t) => t.id !== e);
     }
-    return L(X, {
+    return N(Y, {
       variant: r(() => v.variant),
       activeId: l,
       tabsetId: m,
@@ -89,21 +87,21 @@ const ae = /* @__PURE__ */ D({
       unregister: B,
       isActive: x,
       activate: y
-    }), N(() => {
+    }), V(() => {
       var t;
       if (!f.value) return;
       const e = (t = _.default) == null ? void 0 : t.call(_);
       e && e.length > 0 && console.warn(
         "[PaTabs] cannot mix array API (`tabs` prop) with composition API (<PaTab> children). Pick one — the array API wins."
       );
-    }), (e, t) => (c(), p("div", q, [
+    }), (e, t) => (c(), p("div", G, [
       u("div", {
         class: w(["pa-tabs__strip", `pa-tabs__strip--variant-${b.variant}`]),
         role: "tablist",
         "aria-label": b.label,
         "aria-orientation": "horizontal"
       }, [
-        (c(!0), p(V, null, F(d.value, (a) => (c(), p("button", {
+        (c(!0), p(F, null, H(d.value, (a) => (c(), p("button", {
           key: a.id,
           type: "button",
           role: "tab",
@@ -121,17 +119,17 @@ const ae = /* @__PURE__ */ D({
             class: "pa-tabs__tab-accent",
             "aria-hidden": "true"
           }, null, -1)),
-          u("span", O, [
-            a.icon ? (c(), H(j, {
+          u("span", Q, [
+            a.icon ? (c(), M(q, {
               key: 0,
               name: a.icon,
               size: "sm"
             }, null, 8, ["name"])) : k("", !0),
-            u("span", Q, M(a.label), 1)
+            u("span", U, R(a.label), 1)
           ])
-        ], 42, J))), 128))
-      ], 10, G),
-      u("div", U, [
+        ], 42, O))), 128))
+      ], 10, J),
+      u("div", W, [
         f.value && o.value ? (c(), p("div", {
           key: 0,
           role: "tabpanel",
@@ -141,14 +139,14 @@ const ae = /* @__PURE__ */ D({
           tabindex: "0"
         }, [
           P(e.$slots, `panel-${o.value.id}`, { tab: o.value }, void 0, !0)
-        ], 8, W)) : k("", !0),
+        ], 8, X)) : k("", !0),
         f.value ? k("", !0) : P(e.$slots, "default", { key: 1 }, void 0, !0)
       ])
     ]));
   }
 });
 export {
-  X as PaTabsKey,
+  Y as PaTabsKey,
   ae as default
 };
 //# sourceMappingURL=PaTabs.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaTabs.vue2.js","sources":["../../../src/components/PaTabs/PaTabs.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, InjectionKey } from 'vue'\nimport type { PaIconName } from '../PaIcon'\n\nexport type PaTabsVariant = 'line' | 'background'\n\nexport interface PaTabsTab {\n  id: string\n  label: string\n  icon?: PaIconName\n  disabled?: boolean\n}\n\nexport interface PaTabsProps {\n  tabs?: PaTabsTab[]\n  activeId?: string\n  variant?: PaTabsVariant\n  label?: string\n}\n\nexport interface PaTabsContext {\n  variant: ComputedRef<PaTabsVariant>\n  activeId: ComputedRef<string | undefined>\n  tabsetId: string\n  register(descriptor: PaTabsTab): void\n  unregister(id: string): void\n  isActive(id: string): boolean\n  activate(id: string): void\n}\n\nexport const PaTabsKey: InjectionKey<PaTabsContext> = Symbol('PaTabsKey')\n\nlet tabsetCounter = 0\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, provide, ref, useSlots } from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\n\nconst props = withDefaults(defineProps<PaTabsProps>(), {\n  tabs: () => [],\n  activeId: undefined,\n  variant: 'line',\n  label: undefined,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:activeId', id: string): void\n}>()\n\nconst slots = useSlots()\nconst tabsetId = `pa-tabs-${++tabsetCounter}`\n\nconst registry = ref<PaTabsTab[]>([])\n\nconst usingArrayApi = computed(() => (props.tabs ?? []).length > 0)\n\nconst effectiveTabs = computed<PaTabsTab[]>(() =>\n  usingArrayApi.value ? props.tabs ?? [] : registry.value,\n)\n\nconst resolvedActiveId = computed<string | undefined>(() => {\n  const list = effectiveTabs.value\n  const wanted = props.activeId\n  if (wanted) {\n    const match = list.find((t) => t.id === wanted)\n    if (match && !match.disabled) return match.id\n  }\n  return list.find((t) => !t.disabled)?.id\n})\n\nconst activePanelTab = computed<PaTabsTab | undefined>(() =>\n  effectiveTabs.value.find((t) => t.id === resolvedActiveId.value),\n)\n\nfunction tabId(id: string) {\n  return `${tabsetId}__tab-${id}`\n}\n\nfunction panelId(id: string) {\n  return `${tabsetId}__panel-${id}`\n}\n\nfunction isActive(id: string) {\n  return resolvedActiveId.value === id\n}\n\nfunction activate(id: string) {\n  const tab = effectiveTabs.value.find((t) => t.id === id)\n  if (!tab || tab.disabled) return\n  if (tab.id === resolvedActiveId.value) return\n  emit('update:activeId', tab.id)\n}\n\nfunction onTabClick(tab: PaTabsTab) {\n  activate(tab.id)\n}\n\nfunction focusTab(id: string) {\n  nextTick(() => {\n    const el = document.getElementById(tabId(id)) as HTMLButtonElement | null\n    el?.focus()\n  })\n}\n\nfunction onTabKeyDown(event: KeyboardEvent, currentTab: PaTabsTab) {\n  const enabled = effectiveTabs.value.filter((t) => !t.disabled)\n  if (enabled.length === 0) return\n\n  const idx = enabled.findIndex((t) => t.id === currentTab.id)\n  let target: PaTabsTab | undefined\n\n  switch (event.key) {\n    case 'ArrowRight':\n      target = enabled[(idx + 1 + enabled.length) % enabled.length]\n      break\n    case 'ArrowLeft':\n      target = enabled[(idx - 1 + enabled.length) % enabled.length]\n      break\n    case 'Home':\n      target = enabled[0]\n      break\n    case 'End':\n      target = enabled[enabled.length - 1]\n      break\n    case ' ':\n    case 'Enter':\n      event.preventDefault()\n      activate(currentTab.id)\n      return\n    default:\n      return\n  }\n\n  event.preventDefault()\n  if (!target) return\n  if (target.id !== resolvedActiveId.value) {\n    emit('update:activeId', target.id)\n  }\n  focusTab(target.id)\n}\n\nfunction register(descriptor: PaTabsTab) {\n  const existing = registry.value.findIndex((t) => t.id === descriptor.id)\n  if (existing >= 0) {\n    registry.value.splice(existing, 1, descriptor)\n  } else {\n    registry.value.push(descriptor)\n  }\n}\n\nfunction unregister(id: string) {\n  registry.value = registry.value.filter((t) => t.id !== id)\n}\n\nprovide(PaTabsKey, {\n  variant: computed(() => props.variant),\n  activeId: resolvedActiveId,\n  tabsetId,\n  register,\n  unregister,\n  isActive,\n  activate,\n})\n\nonMounted(() => {\n  if (!usingArrayApi.value) return\n  const def = slots.default?.()\n  if (def && def.length > 0) {\n    console.warn(\n      '[PaTabs] cannot mix array API (`tabs` prop) with composition API (<PaTab> children). Pick one — the array API wins.',\n    )\n  }\n})\n</script>\n\n<template>\n  <div class=\"pa-tabs\">\n    <div class=\"pa-tabs__strip\"\n         :class=\"`pa-tabs__strip--variant-${variant}`\"\n         role=\"tablist\"\n         :aria-label=\"label\"\n         aria-orientation=\"horizontal\">\n      <button v-for=\"tab in effectiveTabs\"\n              :key=\"tab.id\"\n              type=\"button\"\n              role=\"tab\"\n              class=\"pa-tabs__tab\"\n              :class=\"`pa-tabs__tab--variant-${variant}`\"\n              :id=\"tabId(tab.id)\"\n              :aria-selected=\"tab.id === resolvedActiveId\"\n              :aria-controls=\"panelId(tab.id)\"\n              :aria-disabled=\"tab.disabled || undefined\"\n              :tabindex=\"tab.id === resolvedActiveId ? 0 : -1\"\n              :disabled=\"tab.disabled\"\n              @click=\"onTabClick(tab)\"\n              @keydown=\"onTabKeyDown($event, tab)\">\n        <span class=\"pa-tabs__tab-accent\"\n              aria-hidden=\"true\" />\n        <span class=\"pa-tabs__tab-content\">\n          <PaIcon v-if=\"tab.icon\"\n                  :name=\"tab.icon\"\n                  size=\"sm\" />\n          <span class=\"pa-tabs__tab-label\">{{ tab.label }}</span>\n        </span>\n      </button>\n    </div>\n    <div class=\"pa-tabs__panels\">\n      <div v-if=\"usingArrayApi && activePanelTab\"\n           role=\"tabpanel\"\n           class=\"pa-tabs__panel\"\n           :id=\"panelId(activePanelTab.id)\"\n           :aria-labelledby=\"tabId(activePanelTab.id)\"\n           tabindex=\"0\">\n        <slot :name=\"`panel-${activePanelTab.id}`\"\n              :tab=\"activePanelTab\" />\n      </div>\n      <slot v-if=\"!usingArrayApi\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.pa-tabs {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  font-family: var(--pa-font-family-base);\n}\n\n.pa-tabs__strip {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n}\n\n.pa-tabs__strip--variant-line {\n  align-items: stretch;\n}\n\n.pa-tabs__strip--variant-background {\n  gap: 2px;\n  padding: 0 1px;\n}\n\n.pa-tabs__tab {\n  background: transparent;\n  border: 0;\n  margin: 0;\n  padding: 0;\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  color: var(--pa-color-text-secondary-gray);\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n}\n\n.pa-tabs__tab[aria-selected='true'] {\n  font-weight: 600;\n}\n\n.pa-tabs__tab:hover:not([aria-disabled='true']) {\n  color: var(--pa-color-primary-hover);\n}\n\n.pa-tabs__tab[aria-disabled='true'] {\n  cursor: not-allowed;\n  color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-tabs__tab:focus-visible {\n  outline: var(--pa-border-xs) solid var(--pa-color-primary-focus-border);\n  outline-offset: 0;\n}\n\n.pa-tabs__tab-content {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.pa-tabs__tab-content :deep(svg) {\n  width: 14px;\n  height: 14px;\n}\n\n/* — line variant — */\n\n.pa-tabs__tab--variant-line .pa-tabs__tab-content {\n  gap: 8px;\n  padding: 14px 32px 9px;\n  order: 1;\n}\n\n.pa-tabs__tab--variant-line .pa-tabs__tab-accent {\n  height: 3px;\n  width: 100%;\n  background: var(--pa-color-bg-primary-light-50);\n  border-radius: 4px;\n  order: 2;\n}\n\n.pa-tabs__tab--variant-line[aria-selected='true'] .pa-tabs__tab-accent {\n  background: var(--pa-color-primary);\n}\n\n.pa-tabs__tab--variant-line:hover:not([aria-disabled='true']) .pa-tabs__tab-accent {\n  background: var(--pa-color-primary-hover);\n}\n\n.pa-tabs__tab--variant-line[aria-disabled='true'] .pa-tabs__tab-accent {\n  background: var(--pa-color-bg-secondary-light-50);\n}\n\n/* — background variant — */\n\n.pa-tabs__tab--variant-background {\n  background: var(--pa-color-bg-primary-light-40);\n  border-radius: 2px;\n}\n\n.pa-tabs__tab--variant-background .pa-tabs__tab-accent {\n  height: 3px;\n  width: 100%;\n  background: transparent;\n  border-radius: 4px;\n  order: 1;\n}\n\n.pa-tabs__tab--variant-background .pa-tabs__tab-content {\n  gap: 12px;\n  padding: 6px 32px;\n  order: 2;\n}\n\n.pa-tabs__tab--variant-background[aria-selected='true'] {\n  background: var(--pa-color-bg-white);\n}\n\n.pa-tabs__tab--variant-background[aria-selected='true'] .pa-tabs__tab-accent {\n  background: var(--pa-color-primary);\n}\n\n.pa-tabs__tab--variant-background:hover:not([aria-disabled='true']):not([aria-selected='true']) .pa-tabs__tab-accent {\n  background: var(--pa-color-primary-hover);\n}\n\n.pa-tabs__tab--variant-background[aria-disabled='true'] {\n  background: var(--pa-color-bg-disabled-gray);\n}\n\n/* — panel — */\n\n.pa-tabs__panel:focus-visible {\n  outline: var(--pa-border-xs) solid var(--pa-color-primary-focus-border);\n  outline-offset: 2px;\n}\n</style>\n"],"names":["PaTabsKey","tabsetCounter","props","__props","emit","__emit","slots","useSlots","tabsetId","registry","ref","usingArrayApi","computed","effectiveTabs","resolvedActiveId","list","wanted","match","t","_a","activePanelTab","tabId","id","panelId","isActive","activate","tab","onTabClick","focusTab","nextTick","el","onTabKeyDown","event","currentTab","enabled","idx","target","register","descriptor","existing","unregister","provide","onMounted","def","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_Fragment","_renderList","$event","_hoisted_4","_createBlock","PaIcon","_hoisted_5","_toDisplayString","_hoisted_6","_renderSlot","_ctx"],"mappings":"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"}
+{"version":3,"file":"PaTabs.vue2.js","sources":["../../../src/components/PaTabs/PaTabs.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, InjectionKey } from 'vue'\nimport type { PaIconName } from '../PaIcon'\n\nexport type PaTabsVariant = 'line' | 'background'\n\nexport interface PaTabsTab {\n  id: string\n  label: string\n  icon?: PaIconName\n  disabled?: boolean\n}\n\nexport interface PaTabsProps {\n  tabs?: PaTabsTab[]\n  activeId?: string\n  variant?: PaTabsVariant\n  label?: string\n}\n\nexport interface PaTabsContext {\n  variant: ComputedRef<PaTabsVariant>\n  activeId: ComputedRef<string | undefined>\n  tabsetId: string\n  register(descriptor: PaTabsTab): void\n  unregister(id: string): void\n  isActive(id: string): boolean\n  activate(id: string): void\n}\n\nexport const PaTabsKey: InjectionKey<PaTabsContext> = Symbol('PaTabsKey')\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, provide, ref, useId, useSlots } from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\n\nconst props = withDefaults(defineProps<PaTabsProps>(), {\n  tabs: () => [],\n  activeId: undefined,\n  variant: 'line',\n  label: undefined,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:activeId', id: string): void\n}>()\n\nconst slots = useSlots()\nconst tabsetId = `pa-tabs-${useId()}`\n\nconst registry = ref<PaTabsTab[]>([])\n\nconst usingArrayApi = computed(() => (props.tabs ?? []).length > 0)\n\nconst effectiveTabs = computed<PaTabsTab[]>(() =>\n  usingArrayApi.value ? props.tabs ?? [] : registry.value,\n)\n\nconst resolvedActiveId = computed<string | undefined>(() => {\n  const list = effectiveTabs.value\n  const wanted = props.activeId\n  if (wanted) {\n    const match = list.find((t) => t.id === wanted)\n    if (match && !match.disabled) return match.id\n  }\n  return list.find((t) => !t.disabled)?.id\n})\n\nconst activePanelTab = computed<PaTabsTab | undefined>(() =>\n  effectiveTabs.value.find((t) => t.id === resolvedActiveId.value),\n)\n\nfunction tabId(id: string) {\n  return `${tabsetId}__tab-${id}`\n}\n\nfunction panelId(id: string) {\n  return `${tabsetId}__panel-${id}`\n}\n\nfunction isActive(id: string) {\n  return resolvedActiveId.value === id\n}\n\nfunction activate(id: string) {\n  const tab = effectiveTabs.value.find((t) => t.id === id)\n  if (!tab || tab.disabled) return\n  if (tab.id === resolvedActiveId.value) return\n  emit('update:activeId', tab.id)\n}\n\nfunction onTabClick(tab: PaTabsTab) {\n  activate(tab.id)\n}\n\nfunction focusTab(id: string) {\n  nextTick(() => {\n    const el = document.getElementById(tabId(id)) as HTMLButtonElement | null\n    el?.focus()\n  })\n}\n\nfunction onTabKeyDown(event: KeyboardEvent, currentTab: PaTabsTab) {\n  const enabled = effectiveTabs.value.filter((t) => !t.disabled)\n  if (enabled.length === 0) return\n\n  const idx = enabled.findIndex((t) => t.id === currentTab.id)\n  let target: PaTabsTab | undefined\n\n  switch (event.key) {\n    case 'ArrowRight':\n      target = enabled[(idx + 1 + enabled.length) % enabled.length]\n      break\n    case 'ArrowLeft':\n      target = enabled[(idx - 1 + enabled.length) % enabled.length]\n      break\n    case 'Home':\n      target = enabled[0]\n      break\n    case 'End':\n      target = enabled[enabled.length - 1]\n      break\n    case ' ':\n    case 'Enter':\n      event.preventDefault()\n      activate(currentTab.id)\n      return\n    default:\n      return\n  }\n\n  event.preventDefault()\n  if (!target) return\n  if (target.id !== resolvedActiveId.value) {\n    emit('update:activeId', target.id)\n  }\n  focusTab(target.id)\n}\n\nfunction register(descriptor: PaTabsTab) {\n  const existing = registry.value.findIndex((t) => t.id === descriptor.id)\n  if (existing >= 0) {\n    registry.value.splice(existing, 1, descriptor)\n  } else {\n    registry.value.push(descriptor)\n  }\n}\n\nfunction unregister(id: string) {\n  registry.value = registry.value.filter((t) => t.id !== id)\n}\n\nprovide(PaTabsKey, {\n  variant: computed(() => props.variant),\n  activeId: resolvedActiveId,\n  tabsetId,\n  register,\n  unregister,\n  isActive,\n  activate,\n})\n\nonMounted(() => {\n  if (!usingArrayApi.value) return\n  const def = slots.default?.()\n  if (def && def.length > 0) {\n    console.warn(\n      '[PaTabs] cannot mix array API (`tabs` prop) with composition API (<PaTab> children). Pick one — the array API wins.',\n    )\n  }\n})\n</script>\n\n<template>\n  <div class=\"pa-tabs\">\n    <div class=\"pa-tabs__strip\"\n         :class=\"`pa-tabs__strip--variant-${variant}`\"\n         role=\"tablist\"\n         :aria-label=\"label\"\n         aria-orientation=\"horizontal\">\n      <button v-for=\"tab in effectiveTabs\"\n              :key=\"tab.id\"\n              type=\"button\"\n              role=\"tab\"\n              class=\"pa-tabs__tab\"\n              :class=\"`pa-tabs__tab--variant-${variant}`\"\n              :id=\"tabId(tab.id)\"\n              :aria-selected=\"tab.id === resolvedActiveId\"\n              :aria-controls=\"panelId(tab.id)\"\n              :aria-disabled=\"tab.disabled || undefined\"\n              :tabindex=\"tab.id === resolvedActiveId ? 0 : -1\"\n              :disabled=\"tab.disabled\"\n              @click=\"onTabClick(tab)\"\n              @keydown=\"onTabKeyDown($event, tab)\">\n        <span class=\"pa-tabs__tab-accent\"\n              aria-hidden=\"true\" />\n        <span class=\"pa-tabs__tab-content\">\n          <PaIcon v-if=\"tab.icon\"\n                  :name=\"tab.icon\"\n                  size=\"sm\" />\n          <span class=\"pa-tabs__tab-label\">{{ tab.label }}</span>\n        </span>\n      </button>\n    </div>\n    <div class=\"pa-tabs__panels\">\n      <div v-if=\"usingArrayApi && activePanelTab\"\n           role=\"tabpanel\"\n           class=\"pa-tabs__panel\"\n           :id=\"panelId(activePanelTab.id)\"\n           :aria-labelledby=\"tabId(activePanelTab.id)\"\n           tabindex=\"0\">\n        <slot :name=\"`panel-${activePanelTab.id}`\"\n              :tab=\"activePanelTab\" />\n      </div>\n      <slot v-if=\"!usingArrayApi\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.pa-tabs {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  font-family: var(--pa-font-family-base);\n}\n\n.pa-tabs__strip {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n}\n\n.pa-tabs__strip--variant-line {\n  align-items: stretch;\n}\n\n.pa-tabs__strip--variant-background {\n  gap: 2px;\n  padding: 0 1px;\n}\n\n.pa-tabs__tab {\n  background: transparent;\n  border: 0;\n  margin: 0;\n  padding: 0;\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  color: var(--pa-color-text-secondary-gray);\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n}\n\n.pa-tabs__tab[aria-selected='true'] {\n  font-weight: 600;\n}\n\n.pa-tabs__tab:hover:not([aria-disabled='true']) {\n  color: var(--pa-color-primary-hover);\n}\n\n.pa-tabs__tab[aria-disabled='true'] {\n  cursor: not-allowed;\n  color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-tabs__tab:focus-visible {\n  outline: var(--pa-border-xs) solid var(--pa-color-primary-focus-border);\n  outline-offset: 0;\n}\n\n.pa-tabs__tab-content {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.pa-tabs__tab-content :deep(svg) {\n  width: 14px;\n  height: 14px;\n}\n\n/* — line variant — */\n\n.pa-tabs__tab--variant-line .pa-tabs__tab-content {\n  gap: 8px;\n  padding: 14px 32px 9px;\n  order: 1;\n}\n\n.pa-tabs__tab--variant-line .pa-tabs__tab-accent {\n  height: 3px;\n  width: 100%;\n  background: var(--pa-color-bg-primary-light-50);\n  border-radius: 4px;\n  order: 2;\n}\n\n.pa-tabs__tab--variant-line[aria-selected='true'] .pa-tabs__tab-accent {\n  background: var(--pa-color-primary);\n}\n\n.pa-tabs__tab--variant-line:hover:not([aria-disabled='true']) .pa-tabs__tab-accent {\n  background: var(--pa-color-primary-hover);\n}\n\n.pa-tabs__tab--variant-line[aria-disabled='true'] .pa-tabs__tab-accent {\n  background: var(--pa-color-bg-secondary-light-50);\n}\n\n/* — background variant — */\n\n.pa-tabs__tab--variant-background {\n  background: var(--pa-color-bg-primary-light-40);\n  border-radius: 2px;\n}\n\n.pa-tabs__tab--variant-background .pa-tabs__tab-accent {\n  height: 3px;\n  width: 100%;\n  background: transparent;\n  border-radius: 4px;\n  order: 1;\n}\n\n.pa-tabs__tab--variant-background .pa-tabs__tab-content {\n  gap: 12px;\n  padding: 6px 32px;\n  order: 2;\n}\n\n.pa-tabs__tab--variant-background[aria-selected='true'] {\n  background: var(--pa-color-bg-white);\n}\n\n.pa-tabs__tab--variant-background[aria-selected='true'] .pa-tabs__tab-accent {\n  background: var(--pa-color-primary);\n}\n\n.pa-tabs__tab--variant-background:hover:not([aria-disabled='true']):not([aria-selected='true']) .pa-tabs__tab-accent {\n  background: var(--pa-color-primary-hover);\n}\n\n.pa-tabs__tab--variant-background[aria-disabled='true'] {\n  background: var(--pa-color-bg-disabled-gray);\n}\n\n/* — panel — */\n\n.pa-tabs__panel:focus-visible {\n  outline: var(--pa-border-xs) solid var(--pa-color-primary-focus-border);\n  outline-offset: 2px;\n}\n</style>\n"],"names":["PaTabsKey","props","__props","emit","__emit","slots","useSlots","tabsetId","useId","registry","ref","usingArrayApi","computed","effectiveTabs","resolvedActiveId","list","wanted","match","t","_a","activePanelTab","tabId","id","panelId","isActive","activate","tab","onTabClick","focusTab","nextTick","el","onTabKeyDown","event","currentTab","enabled","idx","target","register","descriptor","existing","unregister","provide","onMounted","def","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_Fragment","_renderList","$event","_hoisted_4","_createBlock","PaIcon","_hoisted_5","_toDisplayString","_hoisted_6","_renderSlot","_ctx"],"mappings":"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"}

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

@@ -16,14 +16,13 @@ export interface PaTextareaProps {
     maxlength?: number;
     minlength?: number;
 }
-export declare function nextPaTextareaId(): string;
-declare const _default: import("vue").DefineComponent<PaTextareaProps & {
+type __VLS_Props = PaTextareaProps;
+type __VLS_PublicProps = __VLS_Props & {
     modelValue?: string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<PaTextareaProps & {
-    modelValue?: string;
-}> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     error: string | boolean;

package/dist/components/PaTextarea/PaTextarea.vue.js

@@ -1,10 +1,8 @@
-import t from "./PaTextarea.vue2.js";
-import { nextPaTextareaId as f } from "./PaTextarea.vue2.js";
+import a from "./PaTextarea.vue2.js";
 /* empty css                */
-import a from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ a(t, [["__scopeId", "data-v-5c22dc2e"]]);
+import o from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ o(a, [["__scopeId", "data-v-4146adc7"]]);
 export {
-  m as default,
-  f as nextPaTextareaId
+  m as default
 };
 //# sourceMappingURL=PaTextarea.vue.js.map

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

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

package/dist/components/PaTextarea/PaTextarea.vue2.js

@@ -1,19 +1,14 @@
-import { defineComponent as q, useModel as B, computed as t, openBlock as l, createElementBlock as r, normalizeClass as m, createTextVNode as k, toDisplayString as u, createCommentVNode as o, withDirectives as T, createElementVNode as V, vModelText as M, mergeModels as w } from "vue";
-const C = ["for"], I = {
+import { defineComponent as q, useModel as B, useId as k, computed as t, openBlock as l, createElementBlock as r, normalizeClass as m, createTextVNode as V, toDisplayString as u, createCommentVNode as o, withDirectives as M, createElementVNode as T, vModelText as w, mergeModels as C } from "vue";
+const I = ["for"], z = {
   key: 0,
   class: "pa-textarea__required",
   "aria-hidden": "true"
-}, z = ["id", "rows", "placeholder", "disabled", "readonly", "required", "name", "autocomplete", "maxlength", "minlength", "aria-required", "aria-invalid", "aria-describedby"], N = {
+}, N = ["id", "rows", "placeholder", "disabled", "readonly", "required", "name", "autocomplete", "maxlength", "minlength", "aria-required", "aria-invalid", "aria-describedby"], $ = {
   key: 1,
   class: "pa-textarea__footer"
-}, $ = ["id"];
-let A = 0;
-function D() {
-  return `pa-textarea-${++A}`;
-}
-const S = /* @__PURE__ */ q({
+}, A = ["id"], S = /* @__PURE__ */ q({
   __name: "PaTextarea",
-  props: /* @__PURE__ */ w({
+  props: /* @__PURE__ */ C({
     size: { default: "sm" },
     rows: { default: 4 },
     label: {},
@@ -35,7 +30,7 @@ const S = /* @__PURE__ */ q({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const a = e, n = B(e, "modelValue"), g = D(), s = t(() => a.id ?? g), v = t(() => `${s.value}-msg`), d = t(() => !!a.error), x = t(() => a.valid && !d.value), f = t(
+    const a = e, n = B(e, "modelValue"), g = `pa-textarea-${k()}`, s = t(() => a.id ?? g), v = t(() => `${s.value}-msg`), d = t(() => !!a.error), x = t(() => a.valid && !d.value), f = t(
       () => typeof a.error == "string" && a.error.length > 0 ? a.error : null
     ), y = t(
       () => !d.value && !x.value && a.helperText ? a.helperText : null
@@ -44,7 +39,7 @@ const S = /* @__PURE__ */ q({
     ), b = t(
       () => c.value && n.value.length >= a.maxlength
     );
-    return (E, h) => (l(), r("div", {
+    return (D, h) => (l(), r("div", {
       class: m([
         "pa-textarea",
         `pa-textarea--${e.size}`,
@@ -61,10 +56,10 @@ const S = /* @__PURE__ */ q({
         for: s.value,
         class: "pa-textarea__label"
       }, [
-        k(u(e.label), 1),
-        e.required ? (l(), r("span", I, "*")) : o("", !0)
-      ], 8, C)) : o("", !0),
-      T(V("textarea", {
+        V(u(e.label), 1),
+        e.required ? (l(), r("span", z, "*")) : o("", !0)
+      ], 8, I)) : o("", !0),
+      M(T("textarea", {
         id: s.value,
         "onUpdate:modelValue": h[0] || (h[0] = (p) => n.value = p),
         rows: e.rows,
@@ -80,15 +75,15 @@ const S = /* @__PURE__ */ q({
         "aria-invalid": d.value || void 0,
         "aria-describedby": i.value ? v.value : void 0,
         class: "pa-textarea__control"
-      }, null, 8, z), [
-        [M, n.value]
+      }, null, 8, N), [
+        [w, n.value]
       ]),
-      i.value || c.value ? (l(), r("div", N, [
+      i.value || c.value ? (l(), r("div", $, [
         i.value ? (l(), r("div", {
           key: 0,
           id: v.value,
           class: m(["pa-textarea__message", { "pa-textarea__message--error": d.value }])
-        }, u(i.value), 11, $)) : o("", !0),
+        }, u(i.value), 11, A)) : o("", !0),
         c.value ? (l(), r("div", {
           key: 1,
           class: m(["pa-textarea__counter", { "pa-textarea__counter--at-limit": b.value }])
@@ -98,7 +93,6 @@ const S = /* @__PURE__ */ q({
   }
 });
 export {
-  S as default,
-  D as nextPaTextareaId
+  S as default
 };
 //# sourceMappingURL=PaTextarea.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaTextarea.vue2.js","sources":["../../../src/components/PaTextarea/PaTextarea.vue"],"sourcesContent":["<script lang=\"ts\">\nlet uid = 0\nexport function nextPaTextareaId() {\n  return `pa-textarea-${++uid}`\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nexport type PaTextareaSize = 'sm' | 'lg'\n\nexport interface PaTextareaProps {\n  size?: PaTextareaSize\n  rows?: number\n  label?: string\n  placeholder?: string\n  disabled?: boolean\n  id?: string\n  helperText?: string\n  error?: string | boolean\n  valid?: boolean\n  required?: boolean\n  readonly?: boolean\n  name?: string\n  autocomplete?: string\n  maxlength?: number\n  minlength?: number\n}\n\nconst props = withDefaults(defineProps<PaTextareaProps>(), {\n  size: 'sm',\n  rows: 4,\n  disabled: false,\n  error: false,\n  valid: false,\n  required: false,\n  readonly: false,\n})\n\nconst model = defineModel<string>({ default: '' })\n\nconst generatedId = nextPaTextareaId()\nconst inputId = computed(() => props.id ?? generatedId)\nconst messageId = computed(() => `${inputId.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\nconst hasCounter = computed(\n  () => typeof props.maxlength === 'number' && props.maxlength > 0,\n)\nconst atLimit = computed(\n  () => hasCounter.value && model.value.length >= (props.maxlength as number),\n)\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'pa-textarea',\n      `pa-textarea--${size}`,\n      {\n        'pa-textarea--disabled': disabled,\n        'pa-textarea--readonly': readonly,\n        'pa-textarea--error': errorActive,\n        'pa-textarea--valid': validActive,\n      },\n    ]\"\n  >\n    <label v-if=\"label\" :for=\"inputId\" class=\"pa-textarea__label\">\n      {{ label }}<span v-if=\"required\" class=\"pa-textarea__required\" aria-hidden=\"true\">*</span>\n    </label>\n    <textarea\n      :id=\"inputId\"\n      v-model=\"model\"\n      :rows=\"rows\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :readonly=\"readonly\"\n      :required=\"required\"\n      :name=\"name\"\n      :autocomplete=\"autocomplete\"\n      :maxlength=\"maxlength\"\n      :minlength=\"minlength\"\n      :aria-required=\"required || undefined\"\n      :aria-invalid=\"errorActive || undefined\"\n      :aria-describedby=\"message ? messageId : undefined\"\n      class=\"pa-textarea__control\"\n    />\n    <div v-if=\"message || hasCounter\" class=\"pa-textarea__footer\">\n      <div\n        v-if=\"message\"\n        :id=\"messageId\"\n        :class=\"['pa-textarea__message', { 'pa-textarea__message--error': errorActive }]\"\n      >\n        {{ message }}\n      </div>\n      <div\n        v-if=\"hasCounter\"\n        :class=\"['pa-textarea__counter', { 'pa-textarea__counter--at-limit': atLimit }]\"\n      >\n        {{ model.length }} / {{ maxlength }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.pa-textarea {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pa-space-2xs);\n  font-family: var(--pa-font-family-base);\n}\n\n.pa-textarea__label {\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  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-textarea__required {\n  margin-left: var(--pa-space-3xs);\n  color: var(--pa-color-error);\n}\n\n.pa-textarea__control {\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0;\n  padding: var(--pa-space-sm);\n  background: var(--pa-color-bg-white);\n  border: var(--pa-border-xs) solid var(--pa-color-bg-secondary-light-50);\n  border-radius: var(--pa-radius-smooth);\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  resize: vertical;\n  transition: border-color 120ms ease, background-color 120ms ease;\n}\n\n.pa-textarea__control::placeholder {\n  color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-textarea__control:hover {\n  border-color: var(--pa-color-neutral-gray);\n}\n\n.pa-textarea__control:focus { outline: none; }\n\n.pa-textarea__control:focus-visible {\n  outline: 3px solid var(--pa-color-primary-focus-border);\n  outline-offset: 0;\n  border-color: var(--pa-color-primary);\n}\n\n.pa-textarea--lg .pa-textarea__label {\n  font-size: var(--pa-font-label-md-size);\n  line-height: var(--pa-font-label-md-line-height);\n  font-weight: var(--pa-font-label-md-weight);\n}\n\n.pa-textarea--disabled .pa-textarea__control {\n  background: var(--pa-color-bg-disabled-gray);\n  color: var(--pa-color-text-disabled-gray);\n  cursor: not-allowed;\n}\n\n.pa-textarea--disabled .pa-textarea__control:hover {\n  border-color: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-textarea--disabled .pa-textarea__label {\n  color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-textarea--readonly .pa-textarea__control {\n  background: var(--pa-color-bg-primary-light-40);\n}\n\n.pa-textarea--error .pa-textarea__control {\n  border-color: var(--pa-color-error);\n  border-width: var(--pa-border-sm);\n}\n.pa-textarea--error .pa-textarea__control:hover {\n  border-color: var(--pa-color-error);\n}\n\n.pa-textarea--valid .pa-textarea__control {\n  border-color: var(--pa-color-success);\n  border-width: var(--pa-border-sm);\n}\n.pa-textarea--valid .pa-textarea__control:hover {\n  border-color: var(--pa-color-success);\n}\n\n.pa-textarea__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-textarea__message--error {\n  color: var(--pa-color-error);\n}\n\n.pa-textarea__footer {\n  display: flex;\n  align-items: baseline;\n  gap: var(--pa-space-sm);\n}\n\n.pa-textarea__counter {\n  margin-left: auto;\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  font-variant-numeric: tabular-nums;\n}\n\n.pa-textarea__counter--at-limit {\n  color: var(--pa-color-error);\n}\n</style>\n"],"names":["uid","nextPaTextareaId","props","__props","model","_useModel","generatedId","inputId","computed","messageId","errorActive","validActive","errorMessage","helperMessage","message","hasCounter","atLimit","_createElementBlock","_normalizeClass","_hoisted_2","_createElementVNode","$event","_openBlock","_hoisted_4","_hoisted_5","_toDisplayString"],"mappings":";;;;;;;;;AACA,IAAIA,IAAM;AACH,SAASC,IAAmB;AACjC,SAAO,eAAe,EAAED,CAAG;AAC7B;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,UAAME,IAAQC,GAURC,IAAQC,EAAmBF,GAAA,YAAgB,GAE3CG,IAAcL,EAAA,GACdM,IAAUC,EAAS,MAAMN,EAAM,MAAMI,CAAW,GAChDG,IAAYD,EAAS,MAAM,GAAGD,EAAQ,KAAK,MAAM,GAEjDG,IAAcF,EAAS,MAAM,EAAQN,EAAM,KAAM,GACjDS,IAAcH,EAAS,MAAMN,EAAM,SAAS,CAACQ,EAAY,KAAK,GAE9DE,IAAeJ;AAAA,MAAS,MAC5B,OAAON,EAAM,SAAU,YAAYA,EAAM,MAAM,SAAS,IAAIA,EAAM,QAAQ;AAAA,IAAA,GAEtEW,IAAgBL;AAAA,MAAS,MAC7B,CAACE,EAAY,SAAS,CAACC,EAAY,SAAST,EAAM,aAAaA,EAAM,aAAa;AAAA,IAAA,GAE9EY,IAAUN,EAAS,MAAMI,EAAa,SAASC,EAAc,KAAK,GAElEE,IAAaP;AAAA,MACjB,MAAM,OAAON,EAAM,aAAc,YAAYA,EAAM,YAAY;AAAA,IAAA,GAE3Dc,IAAUR;AAAA,MACd,MAAMO,EAAW,SAASX,EAAM,MAAM,UAAWF,EAAM;AAAA,IAAA;2BAKvDe,EA+CM,OAAA;AAAA,MA9CH,OAAKC,EAAA;AAAA;wBAA+Cf,EAAA,IAAI;AAAA;mCAA6CA,EAAA;AAAA,mCAA2CA,EAAA;AAAA,gCAAwCO,EAAA;AAAA,gCAA2CC,EAAA;AAAA,QAAA;AAAA;;MAWvNR,EAAA,cAAbc,EAEQ,SAAA;AAAA;QAFa,KAAKV,EAAA;AAAA,QAAS,OAAM;AAAA,MAAA;YACpCJ,EAAA,KAAK,GAAA,CAAA;AAAA,QAAeA,EAAA,iBAAZc,EAA+E,QAA/EE,GAAuE,GAAC;;QAErFC,EAgBE,YAAA;AAAA,QAfC,IAAIb,EAAA;AAAA,sDACIH,EAAK,QAAAiB;AAAA,QACb,MAAMlB,EAAA;AAAA,QACN,aAAaA,EAAA;AAAA,QACb,UAAUA,EAAA;AAAA,QACV,UAAUA,EAAA;AAAA,QACV,UAAUA,EAAA;AAAA,QACV,MAAMA,EAAA;AAAA,QACN,cAAcA,EAAA;AAAA,QACd,WAAWA,EAAA;AAAA,QACX,WAAWA,EAAA;AAAA,QACX,iBAAeA,EAAA,YAAY;AAAA,QAC3B,gBAAcO,EAAA,SAAe;AAAA,QAC7B,oBAAkBI,EAAA,QAAUL,EAAA,QAAY;AAAA,QACzC,OAAM;AAAA,MAAA;YAbGL,EAAA,KAAK;AAAA,MAAA;MAeLU,EAAA,SAAWC,EAAA,SAAtBO,KAAAL,EAcM,OAdNM,GAcM;AAAA,QAZIT,EAAA,cADRG,EAMM,OAAA;AAAA;UAJH,IAAIR,EAAA;AAAA,UACJ,mEAAiEC,EAAA,OAAW,CAAA;AAAA,QAAA,KAE1EI,EAAA,KAAO,GAAA,IAAAU,CAAA;QAGJT,EAAA,cADRE,EAKM,OAAA;AAAA;UAHH,sEAAoED,EAAA,OAAO,CAAA;AAAA,QAAA,GAEzES,EAAArB,EAAA,MAAM,MAAM,IAAG,UAAMD,EAAA,SAAS,GAAA,CAAA;;;;;"}
+{"version":3,"file":"PaTextarea.vue2.js","sources":["../../../src/components/PaTextarea/PaTextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\nexport type PaTextareaSize = 'sm' | 'lg'\n\nexport interface PaTextareaProps {\n  size?: PaTextareaSize\n  rows?: number\n  label?: string\n  placeholder?: string\n  disabled?: boolean\n  id?: string\n  helperText?: string\n  error?: string | boolean\n  valid?: boolean\n  required?: boolean\n  readonly?: boolean\n  name?: string\n  autocomplete?: string\n  maxlength?: number\n  minlength?: number\n}\n\nconst props = withDefaults(defineProps<PaTextareaProps>(), {\n  size: 'sm',\n  rows: 4,\n  disabled: false,\n  error: false,\n  valid: false,\n  required: false,\n  readonly: false,\n})\n\nconst model = defineModel<string>({ default: '' })\n\nconst generatedId = `pa-textarea-${useId()}`\nconst inputId = computed(() => props.id ?? generatedId)\nconst messageId = computed(() => `${inputId.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\nconst hasCounter = computed(\n  () => typeof props.maxlength === 'number' && props.maxlength > 0,\n)\nconst atLimit = computed(\n  () => hasCounter.value && model.value.length >= (props.maxlength as number),\n)\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'pa-textarea',\n      `pa-textarea--${size}`,\n      {\n        'pa-textarea--disabled': disabled,\n        'pa-textarea--readonly': readonly,\n        'pa-textarea--error': errorActive,\n        'pa-textarea--valid': validActive,\n      },\n    ]\"\n  >\n    <label v-if=\"label\" :for=\"inputId\" class=\"pa-textarea__label\">\n      {{ label }}<span v-if=\"required\" class=\"pa-textarea__required\" aria-hidden=\"true\">*</span>\n    </label>\n    <textarea\n      :id=\"inputId\"\n      v-model=\"model\"\n      :rows=\"rows\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :readonly=\"readonly\"\n      :required=\"required\"\n      :name=\"name\"\n      :autocomplete=\"autocomplete\"\n      :maxlength=\"maxlength\"\n      :minlength=\"minlength\"\n      :aria-required=\"required || undefined\"\n      :aria-invalid=\"errorActive || undefined\"\n      :aria-describedby=\"message ? messageId : undefined\"\n      class=\"pa-textarea__control\"\n    />\n    <div v-if=\"message || hasCounter\" class=\"pa-textarea__footer\">\n      <div\n        v-if=\"message\"\n        :id=\"messageId\"\n        :class=\"['pa-textarea__message', { 'pa-textarea__message--error': errorActive }]\"\n      >\n        {{ message }}\n      </div>\n      <div\n        v-if=\"hasCounter\"\n        :class=\"['pa-textarea__counter', { 'pa-textarea__counter--at-limit': atLimit }]\"\n      >\n        {{ model.length }} / {{ maxlength }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.pa-textarea {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pa-space-2xs);\n  font-family: var(--pa-font-family-base);\n}\n\n.pa-textarea__label {\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  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-textarea__required {\n  margin-left: var(--pa-space-3xs);\n  color: var(--pa-color-error);\n}\n\n.pa-textarea__control {\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0;\n  padding: var(--pa-space-sm);\n  background: var(--pa-color-bg-white);\n  border: var(--pa-border-xs) solid var(--pa-color-bg-secondary-light-50);\n  border-radius: var(--pa-radius-smooth);\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  resize: vertical;\n  transition: border-color 120ms ease, background-color 120ms ease;\n}\n\n.pa-textarea__control::placeholder {\n  color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-textarea__control:hover {\n  border-color: var(--pa-color-neutral-gray);\n}\n\n.pa-textarea__control:focus { outline: none; }\n\n.pa-textarea__control:focus-visible {\n  outline: 3px solid var(--pa-color-primary-focus-border);\n  outline-offset: 0;\n  border-color: var(--pa-color-primary);\n}\n\n.pa-textarea--lg .pa-textarea__label {\n  font-size: var(--pa-font-label-md-size);\n  line-height: var(--pa-font-label-md-line-height);\n  font-weight: var(--pa-font-label-md-weight);\n}\n\n.pa-textarea--disabled .pa-textarea__control {\n  background: var(--pa-color-bg-disabled-gray);\n  color: var(--pa-color-text-disabled-gray);\n  cursor: not-allowed;\n}\n\n.pa-textarea--disabled .pa-textarea__control:hover {\n  border-color: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-textarea--disabled .pa-textarea__label {\n  color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-textarea--readonly .pa-textarea__control {\n  background: var(--pa-color-bg-primary-light-40);\n}\n\n.pa-textarea--error .pa-textarea__control {\n  border-color: var(--pa-color-error);\n  border-width: var(--pa-border-sm);\n}\n.pa-textarea--error .pa-textarea__control:hover {\n  border-color: var(--pa-color-error);\n}\n\n.pa-textarea--valid .pa-textarea__control {\n  border-color: var(--pa-color-success);\n  border-width: var(--pa-border-sm);\n}\n.pa-textarea--valid .pa-textarea__control:hover {\n  border-color: var(--pa-color-success);\n}\n\n.pa-textarea__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-textarea__message--error {\n  color: var(--pa-color-error);\n}\n\n.pa-textarea__footer {\n  display: flex;\n  align-items: baseline;\n  gap: var(--pa-space-sm);\n}\n\n.pa-textarea__counter {\n  margin-left: auto;\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  font-variant-numeric: tabular-nums;\n}\n\n.pa-textarea__counter--at-limit {\n  color: var(--pa-color-error);\n}\n</style>\n"],"names":["props","__props","model","_useModel","generatedId","useId","inputId","computed","messageId","errorActive","validActive","errorMessage","helperMessage","message","hasCounter","atLimit","_createElementBlock","_normalizeClass","_hoisted_2","_createElementVNode","$event","_openBlock","_hoisted_4","_hoisted_5","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,UAAMA,IAAQC,GAURC,IAAQC,EAAmBF,GAAA,YAAgB,GAE3CG,IAAc,eAAeC,EAAA,CAAO,IACpCC,IAAUC,EAAS,MAAMP,EAAM,MAAMI,CAAW,GAChDI,IAAYD,EAAS,MAAM,GAAGD,EAAQ,KAAK,MAAM,GAEjDG,IAAcF,EAAS,MAAM,EAAQP,EAAM,KAAM,GACjDU,IAAcH,EAAS,MAAMP,EAAM,SAAS,CAACS,EAAY,KAAK,GAE9DE,IAAeJ;AAAA,MAAS,MAC5B,OAAOP,EAAM,SAAU,YAAYA,EAAM,MAAM,SAAS,IAAIA,EAAM,QAAQ;AAAA,IAAA,GAEtEY,IAAgBL;AAAA,MAAS,MAC7B,CAACE,EAAY,SAAS,CAACC,EAAY,SAASV,EAAM,aAAaA,EAAM,aAAa;AAAA,IAAA,GAE9Ea,IAAUN,EAAS,MAAMI,EAAa,SAASC,EAAc,KAAK,GAElEE,IAAaP;AAAA,MACjB,MAAM,OAAOP,EAAM,aAAc,YAAYA,EAAM,YAAY;AAAA,IAAA,GAE3De,IAAUR;AAAA,MACd,MAAMO,EAAW,SAASZ,EAAM,MAAM,UAAWF,EAAM;AAAA,IAAA;2BAKvDgB,EA+CM,OAAA;AAAA,MA9CH,OAAKC,EAAA;AAAA;wBAA+ChB,EAAA,IAAI;AAAA;mCAA6CA,EAAA;AAAA,mCAA2CA,EAAA;AAAA,gCAAwCQ,EAAA;AAAA,gCAA2CC,EAAA;AAAA,QAAA;AAAA;;MAWvNT,EAAA,cAAbe,EAEQ,SAAA;AAAA;QAFa,KAAKV,EAAA;AAAA,QAAS,OAAM;AAAA,MAAA;YACpCL,EAAA,KAAK,GAAA,CAAA;AAAA,QAAeA,EAAA,iBAAZe,EAA+E,QAA/EE,GAAuE,GAAC;;QAErFC,EAgBE,YAAA;AAAA,QAfC,IAAIb,EAAA;AAAA,sDACIJ,EAAK,QAAAkB;AAAA,QACb,MAAMnB,EAAA;AAAA,QACN,aAAaA,EAAA;AAAA,QACb,UAAUA,EAAA;AAAA,QACV,UAAUA,EAAA;AAAA,QACV,UAAUA,EAAA;AAAA,QACV,MAAMA,EAAA;AAAA,QACN,cAAcA,EAAA;AAAA,QACd,WAAWA,EAAA;AAAA,QACX,WAAWA,EAAA;AAAA,QACX,iBAAeA,EAAA,YAAY;AAAA,QAC3B,gBAAcQ,EAAA,SAAe;AAAA,QAC7B,oBAAkBI,EAAA,QAAUL,EAAA,QAAY;AAAA,QACzC,OAAM;AAAA,MAAA;YAbGN,EAAA,KAAK;AAAA,MAAA;MAeLW,EAAA,SAAWC,EAAA,SAAtBO,KAAAL,EAcM,OAdNM,GAcM;AAAA,QAZIT,EAAA,cADRG,EAMM,OAAA;AAAA;UAJH,IAAIR,EAAA;AAAA,UACJ,mEAAiEC,EAAA,OAAW,CAAA;AAAA,QAAA,KAE1EI,EAAA,KAAO,GAAA,IAAAU,CAAA;QAGJT,EAAA,cADRE,EAKM,OAAA;AAAA;UAHH,sEAAoED,EAAA,OAAO,CAAA;AAAA,QAAA,GAEzES,EAAAtB,EAAA,MAAM,MAAM,IAAG,UAAMD,EAAA,SAAS,GAAA,CAAA;;;;;"}

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

@@ -2,7 +2,6 @@ export interface PaTimePickerValue {
     hours: number;
     minutes: number;
 }
-export declare function nextPaTimePickerId(): string;
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     display?: "popover" | "inline";
     placeholder?: string;

package/dist/components/PaTimePicker/PaTimePicker.vue.js

@@ -1,10 +1,8 @@
 import o from "./PaTimePicker.vue2.js";
-import { nextPaTimePickerId as p } from "./PaTimePicker.vue2.js";
 /* empty css                  */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const a = /* @__PURE__ */ r(o, [["__scopeId", "data-v-18b4d7af"]]);
+const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-04841443"]]);
 export {
-  a as default,
-  p as nextPaTimePickerId
+  e as default
 };
 //# sourceMappingURL=PaTimePicker.vue.js.map

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

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

package/dist/components/PaTimePicker/PaTimePicker.vue2.js

@@ -1,17 +1,12 @@
-import { defineComponent as se, useModel as de, ref as V, computed as l, watch as ce, onBeforeUnmount as me, openBlock as _, createElementBlock as D, normalizeClass as h, createTextVNode as fe, toDisplayString as M, createCommentVNode as E, withKeys as H, withModifiers as L, createElementVNode as s, renderSlot as ve, createVNode as x, withDirectives as pe, vShow as he, mergeModels as be } from "vue";
+import { defineComponent as de, useModel as ce, ref as S, useId as ne, computed as l, watch as me, onBeforeUnmount as fe, openBlock as _, createElementBlock as D, normalizeClass as h, createTextVNode as ve, toDisplayString as M, createCommentVNode as E, withKeys as H, withModifiers as L, createElementVNode as s, renderSlot as pe, createVNode as x, withDirectives as he, vShow as be, mergeModels as ke } from "vue";
 import z from "../PaIcon/PaIcon.vue.js";
-const ke = ["for"], ye = {
+const ye = ["for"], we = {
   key: 0,
   class: "pa-time-picker__required",
   "aria-hidden": "true"
-}, we = ["id", "disabled", "aria-expanded", "aria-required", "aria-invalid", "aria-readonly", "aria-describedby", "onKeydown"], ge = { class: "pa-time-picker__value" }, _e = ["name", "value", "disabled", "readonly", "required"], De = { class: "pa-time-picker__spinner" }, Me = { class: "pa-time-picker__column" }, Ee = ["aria-disabled"], xe = ["aria-disabled"], ze = { class: "pa-time-picker__column" }, Ae = ["aria-disabled"], Be = ["aria-disabled"], Pe = ["id"];
-let Te = 0;
-function $e() {
-  return `pa-time-picker-${++Te}`;
-}
-const Ie = /* @__PURE__ */ se({
+}, ge = ["id", "disabled", "aria-expanded", "aria-required", "aria-invalid", "aria-readonly", "aria-describedby", "onKeydown"], _e = { class: "pa-time-picker__value" }, De = ["name", "value", "disabled", "readonly", "required"], Me = { class: "pa-time-picker__spinner" }, Ee = { class: "pa-time-picker__column" }, xe = ["aria-disabled"], ze = ["aria-disabled"], Ae = { class: "pa-time-picker__column" }, Be = ["aria-disabled"], Te = ["aria-disabled"], $e = ["id"], Ce = /* @__PURE__ */ de({
   __name: "PaTimePicker",
-  props: /* @__PURE__ */ be({
+  props: /* @__PURE__ */ ke({
     display: { default: "popover" },
     placeholder: { default: "hh:mm" },
     label: {},
@@ -32,31 +27,31 @@ const Ie = /* @__PURE__ */ se({
   }),
   emits: ["update:modelValue"],
   setup(a) {
-    const t = a, f = de(a, "modelValue"), B = V(null), U = V(null), v = V(!1), N = `pa-time-picker-pop-${Math.random().toString(36).slice(2, 9)}`, ne = $e(), P = l(() => t.id ?? ne), R = l(() => `${P.value}-msg`);
+    const t = a, f = ce(a, "modelValue"), B = S(null), U = S(null), v = S(!1), N = `pa-time-picker-pop-${ne()}`, re = `pa-time-picker-${ne()}`, T = l(() => t.id ?? re), R = l(() => `${T.value}-msg`);
     function w(e) {
       return String(e).padStart(2, "0");
     }
-    function T(e) {
+    function $(e) {
       return e.hours * 60 + e.minutes;
     }
     function o(e) {
-      const n = T(e);
-      return t.min && n < T(t.min) || t.max && n > T(t.max) ? !0 : t.disabledTimes ? t.disabledTimes(e) === !0 : !1;
+      const n = $(e);
+      return t.min && n < $(t.min) || t.max && n > $(t.max) ? !0 : t.disabledTimes ? t.disabledTimes(e) === !0 : !1;
     }
-    const $ = l(() => {
+    const q = l(() => {
       for (let e = 0; e < 24 * 60; e++) {
         const n = { hours: Math.floor(e / 60), minutes: e % 60 };
         if (!o(n)) return n;
       }
       return null;
-    }), q = l(() => $.value === null), c = l(() => f.value ? f.value.hours : q.value ? null : o({ hours: 0, minutes: 0 }) ? $.value.hours : 0), m = l(() => f.value ? f.value.minutes : q.value ? null : o({ hours: 0, minutes: 0 }) ? $.value.minutes : 0), re = l(() => {
+    }), P = l(() => q.value === null), c = l(() => f.value ? f.value.hours : P.value ? null : o({ hours: 0, minutes: 0 }) ? q.value.hours : 0), m = l(() => f.value ? f.value.minutes : P.value ? null : o({ hours: 0, minutes: 0 }) ? q.value.minutes : 0), te = l(() => {
       const e = f.value;
       return e ? `${w(e.hours)}:${w(e.minutes)}` : t.placeholder;
-    }), te = l(() => !f.value), p = l(() => q.value), g = l(() => !!t.error), j = l(() => t.valid && !g.value), ie = l(
+    }), ie = l(() => !f.value), p = l(() => P.value), g = l(() => !!t.error), j = l(() => t.valid && !g.value), ae = l(
       () => typeof t.error == "string" && t.error.length > 0 ? t.error : null
-    ), ae = l(
+    ), oe = l(
       () => !g.value && t.helperText ? t.helperText : null
-    ), C = l(() => ie.value ?? ae.value), oe = l(() => {
+    ), C = l(() => ae.value ?? oe.value), le = l(() => {
       const e = f.value;
       return e ? `${w(e.hours)}:${w(e.minutes)}` : "";
     });
@@ -191,7 +186,7 @@ const Ie = /* @__PURE__ */ se({
       const e = c.value, n = m.value;
       e === null || n === null || o({ hours: e, minutes: n }) || (f.value || u(e, n), t.display === "popover" && A());
     }
-    function le(e) {
+    function ue(e) {
       if (!t.readonly)
         switch (e.key) {
           case "ArrowUp":
@@ -217,7 +212,7 @@ const Ie = /* @__PURE__ */ se({
             break;
         }
     }
-    function ue(e) {
+    function se(e) {
       if (!t.readonly)
         switch (e.key) {
           case "ArrowUp":
@@ -246,13 +241,13 @@ const Ie = /* @__PURE__ */ se({
     function K(e) {
       B.value && (B.value.contains(e.target) || A(!1));
     }
-    function S(e) {
+    function V(e) {
       e.key === "Escape" && (e.preventDefault(), A());
     }
-    return ce(v, (e) => {
-      e ? (document.addEventListener("mousedown", K), window.addEventListener("keydown", S)) : (document.removeEventListener("mousedown", K), window.removeEventListener("keydown", S));
-    }), me(() => {
-      document.removeEventListener("mousedown", K), window.removeEventListener("keydown", S);
+    return me(v, (e) => {
+      e ? (document.addEventListener("mousedown", K), window.addEventListener("keydown", V)) : (document.removeEventListener("mousedown", K), window.removeEventListener("keydown", V));
+    }), fe(() => {
+      document.removeEventListener("mousedown", K), window.removeEventListener("keydown", V);
     }), (e, n) => (_(), D("div", {
       ref_key: "rootRef",
       ref: B,
@@ -270,22 +265,22 @@ const Ie = /* @__PURE__ */ se({
     }, [
       a.label ? (_(), D("label", {
         key: 0,
-        for: P.value,
+        for: T.value,
         class: "pa-time-picker__label"
       }, [
-        fe(M(a.label), 1),
-        a.required ? (_(), D("span", ye, "*")) : E("", !0)
-      ], 8, ke)) : E("", !0),
+        ve(M(a.label), 1),
+        a.required ? (_(), D("span", we, "*")) : E("", !0)
+      ], 8, ye)) : E("", !0),
       a.display === "popover" ? (_(), D("button", {
         key: 1,
-        id: P.value,
+        id: T.value,
         ref_key: "triggerRef",
         ref: U,
         type: "button",
         class: h([
           "pa-time-picker__trigger",
           {
-            "pa-time-picker__trigger--placeholder": te.value,
+            "pa-time-picker__trigger--placeholder": ie.value,
             "pa-time-picker__trigger--disabled": a.disabled,
             "pa-time-picker__trigger--readonly": a.readonly && !a.disabled,
             "pa-time-picker__trigger--error": g.value && !a.disabled,
@@ -307,24 +302,24 @@ const Ie = /* @__PURE__ */ se({
           H(L(J, ["prevent"]), ["down"])
         ]
       }, [
-        s("span", ge, M(re.value), 1),
-        ve(e.$slots, "suffix", {}, () => [
+        s("span", _e, M(te.value), 1),
+        pe(e.$slots, "suffix", {}, () => [
           x(z, {
             name: "clock",
             size: "md"
           })
         ], !0)
-      ], 42, we)) : E("", !0),
+      ], 42, ge)) : E("", !0),
       a.name ? (_(), D("input", {
         key: 2,
         type: "hidden",
         name: a.name,
-        value: oe.value,
+        value: le.value,
         disabled: a.disabled,
         readonly: a.readonly,
         required: a.required
-      }, null, 8, _e)) : E("", !0),
-      pe(s("div", {
+      }, null, 8, De)) : E("", !0),
+      he(s("div", {
         id: N,
         class: h([
           "pa-time-picker__popover",
@@ -333,8 +328,8 @@ const Ie = /* @__PURE__ */ se({
         role: "dialog",
         "aria-modal": "false"
       }, [
-        s("div", De, [
-          s("div", Me, [
+        s("div", Me, [
+          s("div", Ee, [
             s("button", {
               type: "button",
               class: h(["pa-time-picker__chevron", { "pa-time-picker__chevron--inert": p.value }]),
@@ -346,12 +341,12 @@ const Ie = /* @__PURE__ */ se({
                 name: "caret-up",
                 size: "sm"
               })
-            ], 10, Ee),
+            ], 10, xe),
             s("button", {
               type: "button",
               class: "pa-time-picker__cell",
               "aria-label": "Ore",
-              onKeydown: le
+              onKeydown: ue
             }, M(c.value === null ? "--" : w(c.value)), 33),
             s("button", {
               type: "button",
@@ -364,13 +359,13 @@ const Ie = /* @__PURE__ */ se({
                 name: "caret-down",
                 size: "sm"
               })
-            ], 10, xe)
+            ], 10, ze)
           ]),
           n[0] || (n[0] = s("span", {
             class: "pa-time-picker__separator",
             "aria-hidden": "true"
           }, ":", -1)),
-          s("div", ze, [
+          s("div", Ae, [
             s("button", {
               type: "button",
               class: h(["pa-time-picker__chevron", { "pa-time-picker__chevron--inert": p.value }]),
@@ -382,12 +377,12 @@ const Ie = /* @__PURE__ */ se({
                 name: "caret-up",
                 size: "sm"
               })
-            ], 10, Ae),
+            ], 10, Be),
             s("button", {
               type: "button",
               class: "pa-time-picker__cell",
               "aria-label": "Minuti",
-              onKeydown: ue
+              onKeydown: se
             }, M(m.value === null ? "--" : w(m.value)), 33),
             s("button", {
               type: "button",
@@ -400,22 +395,21 @@ const Ie = /* @__PURE__ */ se({
                 name: "caret-down",
                 size: "sm"
               })
-            ], 10, Be)
+            ], 10, Te)
           ])
         ])
       ], 2), [
-        [he, a.display === "inline" || v.value]
+        [be, a.display === "inline" || v.value]
       ]),
       C.value ? (_(), D("div", {
         key: 3,
         id: R.value,
         class: h(["pa-time-picker__message", { "pa-time-picker__message--error": g.value }])
-      }, M(C.value), 11, Pe)) : E("", !0)
+      }, M(C.value), 11, $e)) : E("", !0)
     ], 2));
   }
 });
 export {
-  Ie as default,
-  $e as nextPaTimePickerId
+  Ce as default
 };
 //# sourceMappingURL=PaTimePicker.vue2.js.map