@prozorro/prozorro-ui 0.0.7-beta → 0.0.8-beta

package/dist/app/assets/PzModal.stories-GJIUTcxR.js

@@ -0,0 +1,168 @@
+import{d as H,H as Z,L as A,M as J,j as C,e as n,y as v,N as G,f as k,r as f,h as l,l as Q,k as P,z as X,T as Y,O as ee,g as r,w as oe,J as te,t as se,o as a,i as F}from"./iframe-XnrfGA2g.js";import{P as O,_ as ae}from"./PzText-LfRr6NF7.js";import{_ as le}from"./PzIcon-Don8TXO3.js";import"./preload-helper-C1FmrZbK.js";const ne=["compact","regular","wide","fullscreen"],re="close",de={id:"default",title:"",size:"regular",closeOnOverlay:!0,closeOnEscape:!0,showCloseButton:!0,closeLabel:"Close modal"},ie=["aria-labelledby","aria-describedby"],ce=["id"],pe=["aria-label"],ue=["id"],me={key:1,class:"pz-modal-footer"},m=H({name:"PzModal",__name:"PzModal",props:ee({id:{},isOpen:{type:Boolean},title:{},size:{},closeOnOverlay:{type:Boolean},closeOnEscape:{type:Boolean},showCloseButton:{type:Boolean},closeLabel:{}},de),setup(e,{emit:t}){const d=Z(),o=e,y=t,g=r(()=>`pz-modal-title-${o.id}`),w=r(()=>`pz-modal-description-${o.id}`),z=r(()=>!!(o.title||d.header)),K=r(()=>z.value||o.showCloseButton),R=r(()=>[`pz-modal-dialog--${o.size}`]);let M="";const _=s=>{if(!(typeof document>"u")){if(s){M=document.body.style.overflow,document.body.style.overflow="hidden";return}document.body.style.overflow=M}},b=()=>{y(re)},U=()=>{o.closeOnOverlay&&b()},W=()=>{o.closeOnEscape&&b()};return A(()=>o.isOpen,s=>{_(s)},{immediate:!0}),J(()=>{_(!1)}),(s,x)=>(a(),C(Y,{to:"body"},[o.isOpen?(a(),n("div",{key:0,class:"pz-modal",onKeydown:X(W,["esc"])},[v("div",{class:"pz-modal-overlay",onClick:U},[v("div",{ref:"dialogRef",class:k(["pz-modal-dialog",R.value]),role:"dialog","aria-modal":!0,"aria-labelledby":g.value,"aria-describedby":w.value,onClick:x[0]||(x[0]=G(()=>{},["stop"]))},[K.value?(a(),n("header",{key:0,class:k(["pz-modal-header",{"pz-modal-header--between":z.value}])},[z.value?(a(),n("div",{key:0,id:g.value,class:"pz-modal-title"},[f(s.$slots,"header",{},()=>[o.title?(a(),C(P(O),{key:0,variant:"h4-bold",as:"h2"},{default:oe(()=>[te(se(o.title),1)]),_:1})):l("",!0)],!0)],8,ce)):l("",!0),o.showCloseButton?(a(),n("button",{key:1,type:"button",class:"pz-modal-close","aria-label":o.closeLabel,onClick:b},[Q(P(le),{name:"close",size:"24",label:"Close modal"})],8,pe)):l("",!0)],2)):l("",!0),v("div",{id:w.value,class:"pz-modal-body"},[f(s.$slots,"default",{},void 0,!0)],8,ue),s.$slots.footer?(a(),n("footer",me,[f(s.$slots,"footer",{},void 0,!0)])):l("",!0)],10,ie)])],32)):l("",!0)]))}}),h=ae(m,[["__scopeId","data-v-8dc1c00e"]]);m.__docgenInfo=Object.assign({displayName:m.name??m.__name},{name:"PzModal",exportName:"default",displayName:"PzModal",description:"",tags:{},props:[{name:"id",required:!1,type:{name:"string"}},{name:"isOpen",required:!0,type:{name:"boolean"}},{name:"title",required:!1,type:{name:"string"}},{name:"size",required:!1,type:{name:"PzModalSize"}},{name:"closeOnOverlay",required:!1,type:{name:"boolean"}},{name:"closeOnEscape",required:!1,type:{name:"boolean"}},{name:"showCloseButton",required:!1,type:{name:"boolean"}},{name:"closeLabel",required:!1,type:{name:"string"}}],slots:[{name:"header"},{name:"default"},{name:"footer"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/PzModal/PzModal.vue"]});const ye=e=>`<template>
+  <PzModal ${[':is-open="true"',e.title?`title="${e.title}"`:null,e.size!=="regular"?`size="${e.size}"`:null,e.closeOnOverlay===!1?':close-on-overlay="false"':null,e.closeOnEscape===!1?':close-on-escape="false"':null,e.showCloseButton===!1?':show-close-button="false"':null].filter(d=>!!d).join(" ")}>
+    <p>Modal content</p>
+  </PzModal>
+</template>`,ze=()=>`<template>
+  <PzModal :is-open="true" size="fullscreen">
+    <template #header>
+      <h2>інформація про КБВ.pdf</h2>
+    </template>
+
+    <template #footer>
+      <button type="button">Закрити</button>
+    </template>
+
+    <div>Document preview content</div>
+  </PzModal>
+</template>`,be={title:"Components/Popups/PzModal",component:h,parameters:{prototype:{caption:"Modal component",note:"Based on the old isOpen/close modal, but rebuilt as a design-system dialog with overlay handling, sticky header and footer areas, and size variants for compact flows or document preview surfaces."},docs:{description:{component:"Use `PzModal` for dialogs, side-by-side review surfaces, and document preview overlays. The body content defaults to `body-regular`, while header and footer stay slot-driven for flexible composition."},source:{transform:(e,t)=>ye(t.args??be.args)}}},args:{id:"storybook-modal",isOpen:!1,title:"Документи тендера",size:"regular",closeOnOverlay:!0,closeOnEscape:!0,showCloseButton:!0,closeLabel:"Close modal",buttonLabel:"Open modal"},argTypes:{isOpen:{control:"boolean",description:"Controlled open state."},title:{control:"text",description:"Default title rendered in the header when the header slot is not used."},size:{control:"inline-radio",options:ne,description:"Dialog width preset."},closeOnOverlay:{control:"boolean",description:"Closes the dialog when the overlay is clicked."},closeOnEscape:{control:"boolean",description:"Closes the dialog on Escape."},showCloseButton:{control:"boolean",description:"Shows the close icon button in the header."},closeLabel:{control:"text",description:"Accessible label for the close button."},buttonLabel:{control:"text",description:"Story-only trigger label.",table:{category:"Story"}}},render:e=>({components:{pzModal:h,pzText:O},setup(){const t=F(!!e.isOpen);return A(()=>e.isOpen,y=>{t.value=!!y}),{args:e,isOpen:t,openModal:()=>{t.value=!0},closeModal:()=>{t.value=!1}}},template:`
+      <div class="pz-modal-story">
+        <section class="pz-modal-story-board">
+          <div class="pz-modal-story-copy">
+            <span class="pz-modal-story-eyebrow">Dialog surface</span>
+            <pz-text variant="h4-bold">Default modal shell</pz-text>
+            <pz-text variant="body-regular">
+              Sticky header, body-regular content area, and footer actions for short confirmation or review flows.
+            </pz-text>
+
+            <button type="button" class="pz-modal-story-trigger" @click="openModal">
+              {{ args.buttonLabel }}
+            </button>
+          </div>
+        </section>
+
+        <pz-modal
+          :id="args.id"
+          :is-open="isOpen"
+          :title="args.title"
+          :size="args.size"
+          :close-on-overlay="args.closeOnOverlay"
+          :close-on-escape="args.closeOnEscape"
+          :show-close-button="args.showCloseButton"
+          :close-label="args.closeLabel"
+          @close="closeModal"
+        >
+          <div class="pz-modal-story-content">
+            <pz-text variant="body-regular">
+              Перегляньте вкладені документи, деталі постачальника та супровідні матеріали без виходу з поточного сценарію закупівлі.
+            </pz-text>
+
+            <div class="pz-modal-story-paper">
+              <pz-text variant="body-semibold">інформація про КБВ.pdf</pz-text>
+              <pz-text variant="body-regular">
+                Інформація про кінцевих бенефіціарних власників постачальника товару, виконавця робіт, надавача послуги.
+              </pz-text>
+            </div>
+          </div>
+
+          <template #footer>
+            <button type="button" class="pz-modal-story-secondary" @click="closeModal">Скасувати</button>
+            <button type="button" class="pz-modal-story-primary" @click="closeModal">Підтвердити</button>
+          </template>
+        </pz-modal>
+      </div>
+    `})},i={},c={args:{title:"Інформація про документ",size:"compact",buttonLabel:"Open compact modal"}},p={args:{title:"Перегляд документів закупівлі",size:"wide",buttonLabel:"Open wide modal"}},u={parameters:{docs:{source:{code:ze()}}},render:()=>({components:{pzModal:h,pzText:O},setup(){const e=F(!1);return{isOpen:e,openModal:()=>{e.value=!0},closeModal:()=>{e.value=!1}}},template:`
+      <div class="pz-modal-story">
+        <section class="pz-modal-story-board">
+          <div class="pz-modal-story-copy">
+            <span class="pz-modal-story-eyebrow">Fullscreen review</span>
+            <pz-text variant="h4-bold">Document preview surface</pz-text>
+            <button type="button" class="pz-modal-story-trigger" @click="openModal">
+              Open fullscreen modal
+            </button>
+          </div>
+        </section>
+
+        <pz-modal
+          id="storybook-fullscreen-modal"
+          :is-open="isOpen"
+          size="fullscreen"
+          title=""
+          @close="closeModal"
+        >
+          <template #header>
+            <div class="pz-modal-story-document-header">
+              <pz-text variant="body-semibold">інформація про КБВ ТОВ МЕЙСІС.jpg</pz-text>
+              <a href="#" class="pz-modal-story-download" @click.prevent>Завантажити</a>
+            </div>
+          </template>
+
+          <div class="pz-modal-story-document">
+            <div class="pz-modal-story-document-frame">
+              <div class="pz-modal-story-document-sheet"></div>
+            </div>
+          </div>
+        </pz-modal>
+      </div>
+    `})};var B,S,L;i.parameters={...i.parameters,docs:{...(B=i.parameters)==null?void 0:B.docs,source:{originalSource:"{}",...(L=(S=i.parameters)==null?void 0:S.docs)==null?void 0:L.source}}};var E,D,T;c.parameters={...c.parameters,docs:{...(E=c.parameters)==null?void 0:E.docs,source:{originalSource:`{
+  args: {
+    title: "Інформація про документ",
+    size: "compact",
+    buttonLabel: "Open compact modal"
+  }
+}`,...(T=(D=c.parameters)==null?void 0:D.docs)==null?void 0:T.source}}};var $,N,q;p.parameters={...p.parameters,docs:{...($=p.parameters)==null?void 0:$.docs,source:{originalSource:`{
+  args: {
+    title: "Перегляд документів закупівлі",
+    size: "wide",
+    buttonLabel: "Open wide modal"
+  }
+}`,...(q=(N=p.parameters)==null?void 0:N.docs)==null?void 0:q.source}}};var j,I,V;u.parameters={...u.parameters,docs:{...(j=u.parameters)==null?void 0:j.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      source: {
+        code: buildSlotSource()
+      }
+    }
+  },
+  render: () => ({
+    components: {
+      pzModal: PzModal,
+      pzText: PzText
+    },
+    setup() {
+      const isOpen = ref(false);
+      return {
+        isOpen,
+        openModal: () => {
+          isOpen.value = true;
+        },
+        closeModal: () => {
+          isOpen.value = false;
+        }
+      };
+    },
+    template: \`
+      <div class="pz-modal-story">
+        <section class="pz-modal-story-board">
+          <div class="pz-modal-story-copy">
+            <span class="pz-modal-story-eyebrow">Fullscreen review</span>
+            <pz-text variant="h4-bold">Document preview surface</pz-text>
+            <button type="button" class="pz-modal-story-trigger" @click="openModal">
+              Open fullscreen modal
+            </button>
+          </div>
+        </section>
+
+        <pz-modal
+          id="storybook-fullscreen-modal"
+          :is-open="isOpen"
+          size="fullscreen"
+          title=""
+          @close="closeModal"
+        >
+          <template #header>
+            <div class="pz-modal-story-document-header">
+              <pz-text variant="body-semibold">інформація про КБВ ТОВ МЕЙСІС.jpg</pz-text>
+              <a href="#" class="pz-modal-story-download" @click.prevent>Завантажити</a>
+            </div>
+          </template>
+
+          <div class="pz-modal-story-document">
+            <div class="pz-modal-story-document-frame">
+              <div class="pz-modal-story-document-sheet"></div>
+            </div>
+          </div>
+        </pz-modal>
+      </div>
+    \`
+  })
+}`,...(V=(I=u.parameters)==null?void 0:I.docs)==null?void 0:V.source}}};const ge=["Playground","CompactInfo","WideReview","DocumentPreview"];export{c as CompactInfo,u as DocumentPreview,i as Playground,p as WideReview,ge as __namedExportsOrder,be as default};

package/dist/app/assets/PzNav-DRAXqlz0.css

@@ -0,0 +1 @@
+.pz-nav-story{display:grid;gap:var(--pz-space-24)}.pz-nav-story-frame{display:grid;gap:var(--pz-space-16);padding:var(--pz-space-24);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 74%,transparent);border-radius:var(--pz-space-24);background:radial-gradient(circle at top right,color-mix(in srgb,var(--pz-color-blue-50) 8%,transparent),transparent 36%),linear-gradient(180deg,color-mix(in srgb,var(--pz-color-white) 98%,transparent),color-mix(in srgb,var(--pz-color-grey-20) 90%,var(--pz-color-white)))}.pz-nav-story-header{display:flex;align-items:start;justify-content:space-between;gap:var(--pz-space-16)}.pz-nav-story-eyebrow,.pz-nav-story-chip{display:inline-flex;align-items:center;width:fit-content;padding:var(--pz-space-8) var(--pz-space-16);border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-10) 92%,var(--pz-color-white));color:var(--pz-color-text-link-hover);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.pz-nav-story-stack{display:grid;gap:var(--pz-space-16)}.pz-nav-story-surface{display:grid;gap:var(--pz-space-16);padding:var(--pz-space-20);border-radius:var(--pz-space-20);background:color-mix(in srgb,var(--pz-color-white) 98%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pz-color-grey-30) 60%,transparent)}.pz-nav-story-grid{display:grid;gap:var(--pz-space-16)}.pz-nav-story-card{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:var(--pz-space-20);padding:var(--pz-space-20);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 74%,transparent);border-radius:var(--pz-space-20);background:color-mix(in srgb,var(--pz-color-white) 96%,transparent);box-shadow:0 12px 32px color-mix(in srgb,var(--pz-color-black-90) 5%,transparent)}.pz-nav-story-card-copy{display:grid;align-content:start;gap:var(--pz-space-12)}.pz-nav-story-card-surface{display:grid;gap:var(--pz-space-16);padding:var(--pz-space-16);border-radius:var(--pz-space-16);background:color-mix(in srgb,var(--pz-color-background-frame) 96%,var(--pz-color-white));overflow:hidden}.pz-nav-story-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding-inline:6px;border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-10) 100%,transparent);color:var(--pz-color-text-link-hover);font-size:var(--pz-font-size-12);font-weight:700}.pz-nav-story-slot{display:inline-flex;align-items:center;gap:var(--pz-space-8)}.pz-nav-story-compact{width:min(100%,520px)}@media (width <= 768px){.pz-nav-story-header{flex-direction:column}.pz-nav-story-card{grid-template-columns:1fr}}.pz-nav[data-v-23082985]{--pz-nav-background: var(--pz-color-background-frame);--pz-nav-active-background: var(--pz-color-background-primary);--pz-nav-active-color: var(--pz-color-text-primary);--pz-nav-link-color: var(--pz-color-text-link);display:flex;width:100%;margin:0;padding:var(--pz-space-4);list-style:none;border-radius:var(--pz-space-16);background:var(--pz-nav-background);overflow-x:auto;scrollbar-color:var(--pz-color-grey-30) var(--pz-nav-active-background)}.pz-nav__item[data-v-23082985]{position:relative;z-index:1;flex:0 0 auto;border-radius:var(--pz-space-12);transition:background-color .16s ease}.pz-nav__item[data-v-23082985]:hover{color:var(--pz-color-text-link-hover)}.pz-nav__item.active[data-v-23082985]{background-color:var(--pz-nav-active-background);box-shadow:0 1px 2px #2426380f,inset 0 0 0 1px #2426380a}.pz-nav__item.disabled[data-v-23082985]{opacity:.5;-webkit-user-select:none;user-select:none;pointer-events:none}.pz-nav__text[data-v-23082985]{display:inline-flex;align-items:center;min-height:44px;padding:12px 24px;border:none;outline:none;background:transparent;color:var(--pz-nav-link-color);text-decoration:none;white-space:nowrap;transition:color .16s ease;font-size:var(--pz-font-size-14);font-weight:600;line-height:1.5}.pz-nav__text.active[data-v-23082985]{color:var(--pz-nav-active-color)}

package/dist/app/assets/PzNav.stories-vqArvp6y.js

@@ -0,0 +1,197 @@
+import{d as R,e as r,F,I as $,o,f as m,j,w as A,r as y,J as x,t as b,k as B,R as O,q as L,g as V,E as z,K as f}from"./iframe-XnrfGA2g.js";import{_ as W,P as g}from"./PzText-LfRr6NF7.js";import"./preload-helper-C1FmrZbK.js";const J={class:"pz-nav"},l=R({name:"PzNav",__name:"PzNav",props:{config:{}},setup(s){const t=L(),h=s,d=a=>{const[n=""]=a.split("#");return n?n.startsWith("/")?n:`/${n}`:"/"},q=a=>a.startsWith("#")?a:d(a),E=V(()=>!h.config.some(a=>d(a.path)===t.path)),u=a=>d(a.path)===t.path||E.value&&!!a.isDefault;return(a,n)=>(o(),r("ul",J,[(o(!0),r(F,null,$(h.config,(e,M)=>(o(),r("li",{key:`${e.path}-${M}`,class:m(["pz-nav__item",[{disabled:e.disabled},{active:u(e)}]])},[e.disabled?(o(),r("span",{key:1,class:m(["pz-nav__text",{active:u(e)}])},[y(a.$slots,"view",{data:e},()=>[x(b(e.text),1)],!0)],2)):(o(),j(B(O),{key:0,to:q(e.path),class:m(["pz-nav__text",{active:u(e)}])},{default:A(()=>[y(a.$slots,"view",{data:e},()=>[x(b(e.text),1)],!0)]),_:2},1032,["to","class"]))],2))),128))]))}}),v=W(l,[["__scopeId","data-v-23082985"]]);l.__docgenInfo=Object.assign({displayName:l.name??l.__name},{name:"PzNav",exportName:"default",displayName:"PzNav",description:"",tags:{},props:[{name:"config",required:!0,type:{name:"Array",elements:[{name:"PzNavItem"}]}}],slots:[{name:"view",scoped:!0,bindings:[{name:"data",title:"binding"}]}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/PzNav/PzNav.vue"]});const N=[{path:"/market/procedures",text:"Закупівлі",isDefault:!0},{path:"/market/contracts",text:"Договори"},{path:"/market/plans",text:"Плани"},{path:"/market/selection",text:"Відбори"},{path:"/market/products",text:"Товари"}],Q=[{path:"/tender/details",text:"Деталі закупівлі",isDefault:!0},{path:"/tender/questions",text:"Питання та вимоги (0)"},{path:"/tender/complaints",text:"Скарги (0)"},{path:"/tender/monitoring",text:"Моніторинг (0)",disabled:!0}],U=[{path:"/archive/overview",text:"Overview",isDefault:!0},{path:"/archive/history",text:"History",disabled:!0},{path:"/archive/files",text:"Files"}],G=s=>`<template>
+  <PzNav :config='${JSON.stringify(s.config,null,2)}' />
+</template>`,H=()=>`<template>
+  <PzNav :config="config">
+    <template #view="{ data }">
+      <span class="custom-nav-item">
+        <span>{{ data.text }}</span>
+        <span v-if="data.count" class="custom-nav-badge">{{ data.count }}</span>
+      </span>
+    </template>
+  </PzNav>
+</template>`,K={title:"Components/Navigation/PzNav",component:v,parameters:{prototype:{caption:"Navigation component",note:"Renamed from the previous app-level URL tabs to the shared `PzNav` component. It keeps the original `config` prop, default-tab logic, disabled states, and the `view` slot for custom item rendering."},docs:{description:{component:"Use `PzNav` when a screen needs route-based horizontal navigation. It follows the previous `url-tabs` API with a `config` array and marks the fallback item active when no route matches and `isDefault` is set."},source:{transform:(s,t)=>G(t.args??K.args)}}},args:{config:N},argTypes:{config:{control:"object",description:"Navigation items with route path, label, disabled state, and optional default fallback."}},render:s=>({components:{pzNav:v,pzText:g},setup(){const t=f();return z(async()=>{await t.push("/market/procedures")}),{args:s,marketNavItems:N,tenderNavItems:Q}},template:`
+      <div class="pz-nav-story">
+        <section class="pz-nav-story-frame">
+          <div class="pz-nav-story-header">
+            <div>
+              <span class="pz-nav-story-eyebrow">Main navigation</span>
+              <pz-text variant="h4-bold">Section switcher for catalog and procurement pages</pz-text>
+            </div>
+            <span class="pz-nav-story-chip">route-aware</span>
+          </div>
+
+          <div class="pz-nav-story-stack">
+            <div class="pz-nav-story-surface">
+              <pz-nav :config="args.config" />
+            </div>
+          </div>
+        </section>
+
+        <section class="pz-nav-story-grid">
+          <article class="pz-nav-story-card">
+            <div class="pz-nav-story-card-copy">
+              <pz-text variant="body-semibold">Market categories</pz-text>
+              <pz-text variant="small-regular">
+                Mirrors the wide navigation from the marketplace landing page.
+              </pz-text>
+            </div>
+
+            <div class="pz-nav-story-card-surface">
+              <pz-nav :config="marketNavItems" />
+            </div>
+          </article>
+
+          <article class="pz-nav-story-card">
+            <div class="pz-nav-story-card-copy">
+              <pz-text variant="body-semibold">Tender detail tabs</pz-text>
+              <pz-text variant="small-regular">
+                Good for process pages where one item is active and another may be disabled.
+              </pz-text>
+            </div>
+
+            <div class="pz-nav-story-card-surface">
+              <div class="pz-nav-story-compact">
+                <pz-nav :config="tenderNavItems" />
+              </div>
+            </div>
+          </article>
+        </section>
+      </div>
+    `})},i={},c={args:{config:U},render:s=>({components:{pzNav:v,pzText:g},setup(){const t=f();return z(async()=>{await t.push("/archive/unknown")}),{args:s}},template:`
+      <div class="pz-nav-story">
+        <section class="pz-nav-story-frame">
+          <div class="pz-nav-story-header">
+            <div>
+              <span class="pz-nav-story-eyebrow">Example</span>
+              <pz-text variant="h4-bold">Default fallback item</pz-text>
+            </div>
+            <span class="pz-nav-story-chip">isDefault</span>
+          </div>
+
+          <div class="pz-nav-story-card-surface">
+            <pz-nav :config="args.config" />
+          </div>
+        </section>
+      </div>
+    `})},p={parameters:{docs:{source:{code:H()}}},render:()=>({components:{pzNav:v,pzText:g},setup(){const s=f(),t=[{path:"/nav/questions",text:"Questions",count:12,isDefault:!0},{path:"/nav/complaints",text:"Complaints",count:2},{path:"/nav/monitoring",text:"Monitoring",count:0,disabled:!0}];return z(async()=>{await s.push("/nav/questions")}),{config:t}},template:`
+      <div class="pz-nav-story">
+        <section class="pz-nav-story-frame">
+          <div class="pz-nav-story-header">
+            <div>
+              <span class="pz-nav-story-eyebrow">Example</span>
+              <pz-text variant="h4-bold">Custom item slot</pz-text>
+            </div>
+            <span class="pz-nav-story-chip">view slot</span>
+          </div>
+
+          <div class="pz-nav-story-card-surface">
+            <pz-nav :config="config">
+              <template #view="{ data }">
+                <span class="pz-nav-story-slot">
+                  <span>{{ data.text }}</span>
+                  <span class="pz-nav-story-badge">{{ data.count }}</span>
+                </span>
+              </template>
+            </pz-nav>
+          </div>
+        </section>
+      </div>
+    `})};var w,k,P;i.parameters={...i.parameters,docs:{...(w=i.parameters)==null?void 0:w.docs,source:{originalSource:"{}",...(P=(k=i.parameters)==null?void 0:k.docs)==null?void 0:P.source}}};var _,I,S;c.parameters={...c.parameters,docs:{...(_=c.parameters)==null?void 0:_.docs,source:{originalSource:`{
+  args: {
+    config: archiveNavItems
+  },
+  render: args => ({
+    components: {
+      pzNav: PzNav,
+      pzText: PzText
+    },
+    setup() {
+      const router = useRouter();
+      onMounted(async () => {
+        await router.push("/archive/unknown");
+      });
+      return {
+        args
+      };
+    },
+    template: \`
+      <div class="pz-nav-story">
+        <section class="pz-nav-story-frame">
+          <div class="pz-nav-story-header">
+            <div>
+              <span class="pz-nav-story-eyebrow">Example</span>
+              <pz-text variant="h4-bold">Default fallback item</pz-text>
+            </div>
+            <span class="pz-nav-story-chip">isDefault</span>
+          </div>
+
+          <div class="pz-nav-story-card-surface">
+            <pz-nav :config="args.config" />
+          </div>
+        </section>
+      </div>
+    \`
+  })
+}`,...(S=(I=c.parameters)==null?void 0:I.docs)==null?void 0:S.source}}};var D,T,C;p.parameters={...p.parameters,docs:{...(D=p.parameters)==null?void 0:D.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      source: {
+        code: buildSlotStorySource()
+      }
+    }
+  },
+  render: () => ({
+    components: {
+      pzNav: PzNav,
+      pzText: PzText
+    },
+    setup() {
+      const router = useRouter();
+      const config = [{
+        path: "/nav/questions",
+        text: "Questions",
+        count: 12,
+        isDefault: true
+      }, {
+        path: "/nav/complaints",
+        text: "Complaints",
+        count: 2
+      }, {
+        path: "/nav/monitoring",
+        text: "Monitoring",
+        count: 0,
+        disabled: true
+      }];
+      onMounted(async () => {
+        await router.push("/nav/questions");
+      });
+      return {
+        config
+      };
+    },
+    template: \`
+      <div class="pz-nav-story">
+        <section class="pz-nav-story-frame">
+          <div class="pz-nav-story-header">
+            <div>
+              <span class="pz-nav-story-eyebrow">Example</span>
+              <pz-text variant="h4-bold">Custom item slot</pz-text>
+            </div>
+            <span class="pz-nav-story-chip">view slot</span>
+          </div>
+
+          <div class="pz-nav-story-card-surface">
+            <pz-nav :config="config">
+              <template #view="{ data }">
+                <span class="pz-nav-story-slot">
+                  <span>{{ data.text }}</span>
+                  <span class="pz-nav-story-badge">{{ data.count }}</span>
+                </span>
+              </template>
+            </pz-nav>
+          </div>
+        </section>
+      </div>
+    \`
+  })
+}`,...(C=(T=p.parameters)==null?void 0:T.docs)==null?void 0:C.source}}};const aa=["Playground","DefaultFallback","CustomItemView"];export{p as CustomItemView,c as DefaultFallback,i as Playground,aa as __namedExportsOrder,K as default};

package/dist/app/assets/PzPagination-DJVeW9lu.css

@@ -0,0 +1 @@
+.pz-pagination-story{display:grid;gap:var(--pz-space-24)}.pz-pagination-story-board,.pz-pagination-story-gallery{display:grid;gap:var(--pz-space-16);padding:var(--pz-space-24);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 72%,transparent);border-radius:var(--pz-space-24);background:radial-gradient(circle at top right,color-mix(in srgb,var(--pz-color-blue-50) 8%,transparent),transparent 34%),linear-gradient(180deg,color-mix(in srgb,var(--pz-color-white) 98%,transparent),color-mix(in srgb,var(--pz-color-grey-20) 90%,var(--pz-color-white)));box-shadow:0 18px 48px color-mix(in srgb,var(--pz-color-black-90) 7%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 96%,transparent)}.pz-pagination-story-header{display:flex;align-items:start;justify-content:space-between;gap:var(--pz-space-16)}.pz-pagination-story-eyebrow,.pz-pagination-story-chip{display:inline-flex;align-items:center;width:fit-content;padding:var(--pz-space-8) var(--pz-space-16);border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-10) 92%,var(--pz-color-white));color:var(--pz-color-text-link-hover);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.pz-pagination-story-preview{display:grid;padding:var(--pz-space-24);border:1px dashed color-mix(in srgb,var(--pz-color-grey-40) 70%,transparent);border-radius:var(--pz-space-20);background:linear-gradient(color-mix(in srgb,var(--pz-color-blue-50) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--pz-color-blue-50) 4%,transparent) 1px,transparent 1px);background-size:28px 28px}.pz-pagination-story-grid{display:grid;gap:var(--pz-space-16)}.pz-pagination-story-card{display:grid;gap:var(--pz-space-8);padding:var(--pz-space-20);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 74%,transparent);border-radius:var(--pz-space-20);background:color-mix(in srgb,var(--pz-color-white) 94%,transparent);box-shadow:0 12px 32px color-mix(in srgb,var(--pz-color-black-90) 5%,transparent)}.pz-pagination-story-card-label{margin:0;color:var(--pz-color-text-secondary);font-size:var(--pz-font-size-12);font-weight:400;line-height:1.5}.pz-pagination-story-current{display:flex;align-items:center;gap:var(--pz-space-8);padding:var(--pz-space-4) var(--pz-space-8);border-radius:4px;background:color-mix(in srgb,var(--pz-color-blue-10) 80%,transparent);width:fit-content}.pz-pagination-story-current-label{color:var(--pz-color-text-secondary);font-size:var(--pz-font-size-12);font-weight:400;line-height:1.5}.pz-pagination-story-current-value{color:var(--pz-color-text-link);font-size:var(--pz-font-size-12);font-weight:700;line-height:1.5}.pz-pagination__list[data-v-6295b1b5]{display:flex;align-items:center;gap:var(--pz-space-4);list-style:none;margin:0;padding:0}.pz-pagination__item[data-v-6295b1b5]{display:flex}.pz-pagination__btn[data-v-6295b1b5]{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:2px;background:transparent;color:var(--pz-color-text-primary);cursor:pointer;transition:color .16s ease,background-color .16s ease,border-color .16s ease;font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-pagination__btn[data-v-6295b1b5]:hover:not(:disabled){background-color:var(--pz-color-grey-20);border-color:var(--pz-color-tag-blue);color:var(--pz-color-text-link-hover)}.pz-pagination__btn--active[data-v-6295b1b5]{border-color:var(--pz-color-tag-blue)}.pz-pagination__btn--nav[data-v-6295b1b5]{color:var(--pz-color-text-primary)}.pz-pagination__btn--nav[data-v-6295b1b5]:disabled{opacity:.35;cursor:default}.pz-pagination__dots[data-v-6295b1b5]{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--pz-color-text-secondary);font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}

package/dist/app/assets/PzPagination.stories-D-kZtPzf.js

@@ -0,0 +1,83 @@
+import{d as M,e as r,y as p,l as T,k as w,F as N,I as D,g as m,o as l,f as q,t as B,i as c,L as G}from"./iframe-XnrfGA2g.js";import{_ as O,P as j}from"./PzText-LfRr6NF7.js";import{_ as x}from"./PzIcon-Don8TXO3.js";import"./preload-helper-C1FmrZbK.js";const R={class:"pz-pagination","aria-label":"Pagination"},U={class:"pz-pagination__list"},W=["disabled"],Y={key:0,class:"pz-pagination__dots","aria-hidden":"true"},H=["aria-current","onClick"],J=["disabled"],P=1,z=M({name:"PzPagination",__name:"PzPagination",props:{modelValue:{},total:{},perPage:{},radius:{default:2}},emits:["update:modelValue"],setup(a,{emit:n}){const e=a,o=n,g=m(()=>Math.ceil(e.total/e.perPage)),d=m(()=>e.modelValue<=1),u=m(()=>e.modelValue>=g.value),$=m(()=>{const s=g.value;if(s<=0)return[];if(s===1)return[{type:"page",page:P}];const y=e.modelValue,t=e.radius,_=P+1,f=s-1,h=Math.max(_,y-t),V=Math.min(f,y+t),i=[{type:"page",page:P}];h>_&&i.push({type:"dots",side:"left"});for(let b=h;b<=V;b++)i.push({type:"page",page:b});return V<f&&i.push({type:"dots",side:"right"}),i.push({type:"page",page:s}),i}),k=s=>{s!==e.modelValue&&o("update:modelValue",s)},L=()=>{d.value||o("update:modelValue",e.modelValue-1)},I=()=>{u.value||o("update:modelValue",e.modelValue+1)};return(s,y)=>(l(),r("nav",R,[p("ul",U,[p("li",null,[p("button",{type:"button",class:"pz-pagination__btn pz-pagination__btn--nav",disabled:d.value,"aria-label":"Попередня сторінка",onClick:L},[T(w(x),{name:"chevron_left",size:"24"})],8,W)]),(l(!0),r(N,null,D($.value,t=>(l(),r("li",{key:t.type==="page"?`p-${t.page}`:`d-${t.side}`,class:"pz-pagination__item"},[t.type==="dots"?(l(),r("span",Y," … ")):(l(),r("button",{key:1,type:"button",class:q(["pz-pagination__btn",{"pz-pagination__btn--active":t.page===a.modelValue}]),"aria-current":t.page===a.modelValue?"page":void 0,onClick:_=>k(t.page)},B(t.page),11,H))]))),128)),p("li",null,[p("button",{type:"button",class:"pz-pagination__btn pz-pagination__btn--nav",disabled:u.value,"aria-label":"Наступна сторінка",onClick:I},[T(w(x),{name:"chevron_right",size:"24"})],8,J)])])]))}}),F=O(z,[["__scopeId","data-v-6295b1b5"]]);z.__docgenInfo=Object.assign({displayName:z.name??z.__name},{name:"PzPagination",exportName:"default",displayName:"PzPagination",description:"",tags:{},props:[{name:"modelValue",required:!0,type:{name:"number"}},{name:"total",required:!0,type:{name:"number"}},{name:"perPage",required:!0,type:{name:"number"}},{name:"radius",required:!1,type:{name:"number"},defaultValue:{func:!1,value:"2"}}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/PzPagination/PzPagination.vue"]});const A=2,K=50,Q=100,X=3,Z="<\/script>",aa=a=>{const n=[':model-value="currentPage"',`:total="${a.total}"`,`:per-page="${a.perPage}"`,a.radius!==A?`:radius="${a.radius}"`:null,'@update:model-value="currentPage = $event"'].filter(e=>!!e).join(`
+    `);return`<script setup lang="ts">
+import { ref } from "vue";
+const currentPage = ref(${a.modelValue});
+${Z}
+
+<template>
+  <PzPagination
+    ${n}
+  />
+</template>`},ea={title:"Components/Navigation/PzPagination",component:F,parameters:{docs:{description:{component:"Use `PzPagination` for navigating paginated content. The component shows prev/next arrows, the first and last page, a window of pages around the current, and collapsing dots for large ranges."},source:{transform:(a,n)=>aa(n.args??ea.args)}}},args:{modelValue:1,total:1e3,perPage:10,radius:A},argTypes:{modelValue:{control:{type:"number",min:1},description:"Current active page (use with `v-model`)."},total:{control:{type:"number",min:0},description:"Total number of items."},perPage:{control:{type:"number",min:1},description:"Number of items per page."},radius:{control:{type:"number",min:1,max:5},description:"Number of page buttons shown on each side of the current page."}},render:a=>({components:{pzPagination:F,pzText:j},setup(){const n=c(a.modelValue),e=c(1),o=c(K),g=c(Q),d=c(X);return G(()=>a.modelValue,u=>{n.value=u}),{args:a,page:n,pageFirst:e,pageMiddle:o,pageLast:g,pageFew:d}},template:`
+      <div class="pz-pagination-story">
+        <section class="pz-pagination-story-board">
+          <div class="pz-pagination-story-header">
+            <div>
+              <span class="pz-pagination-story-eyebrow">Component API</span>
+              <pz-text variant="h4-bold">Page navigation</pz-text>
+            </div>
+            <span class="pz-pagination-story-chip">page {{ page }} / {{ Math.ceil(args.total / args.perPage) }}</span>
+          </div>
+
+          <div class="pz-pagination-story-preview">
+            <div class="pz-pagination-story-current">
+              <span class="pz-pagination-story-current-label">Current page:</span>
+              <strong class="pz-pagination-story-current-value">{{ page }}</strong>
+            </div>
+            <pz-pagination
+              v-model="page"
+              :total="args.total"
+              :per-page="args.perPage"
+              :radius="args.radius"
+            />
+          </div>
+        </section>
+
+        <section class="pz-pagination-story-gallery">
+          <div class="pz-pagination-story-header">
+            <div>
+              <span class="pz-pagination-story-eyebrow">States</span>
+              <pz-text variant="h4-bold">Page position variants</pz-text>
+            </div>
+          </div>
+
+          <div class="pz-pagination-story-grid">
+            <article class="pz-pagination-story-card">
+              <p class="pz-pagination-story-card-label">First page — right dots visible</p>
+              <div class="pz-pagination-story-current">
+                <span class="pz-pagination-story-current-label">Current page:</span>
+                <strong class="pz-pagination-story-current-value">{{ pageFirst }}</strong>
+              </div>
+              <pz-pagination v-model="pageFirst" :total="1000" :per-page="10" />
+            </article>
+
+            <article class="pz-pagination-story-card">
+              <p class="pz-pagination-story-card-label">Middle page — both dots visible</p>
+              <div class="pz-pagination-story-current">
+                <span class="pz-pagination-story-current-label">Current page:</span>
+                <strong class="pz-pagination-story-current-value">{{ pageMiddle }}</strong>
+              </div>
+              <pz-pagination v-model="pageMiddle" :total="1000" :per-page="10" />
+            </article>
+
+            <article class="pz-pagination-story-card">
+              <p class="pz-pagination-story-card-label">Last page — left dots visible</p>
+              <div class="pz-pagination-story-current">
+                <span class="pz-pagination-story-current-label">Current page:</span>
+                <strong class="pz-pagination-story-current-value">{{ pageLast }}</strong>
+              </div>
+              <pz-pagination v-model="pageLast" :total="1000" :per-page="10" />
+            </article>
+
+            <article class="pz-pagination-story-card">
+              <p class="pz-pagination-story-card-label">Few pages — no dots</p>
+              <div class="pz-pagination-story-current">
+                <span class="pz-pagination-story-current-label">Current page:</span>
+                <strong class="pz-pagination-story-current-value">{{ pageFew }}</strong>
+              </div>
+              <pz-pagination v-model="pageFew" :total="50" :per-page="10" />
+            </article>
+          </div>
+        </section>
+      </div>
+    `})},v={};var C,S,E;v.parameters={...v.parameters,docs:{...(C=v.parameters)==null?void 0:C.docs,source:{originalSource:"{}",...(E=(S=v.parameters)==null?void 0:S.docs)==null?void 0:E.source}}};const ia=["Playground"];export{v as Playground,ia as __namedExportsOrder,ea as default};

package/dist/app/assets/PzRouterLink.stories-CRcNmODE.js

@@ -0,0 +1,54 @@
+import{d as g,u as v,j as k,w as n,k as s,R as z,o as y,l as x,m as P,r as u,p as w,g as R,q as _}from"./iframe-XnrfGA2g.js";import{P as L,p as S,a as V}from"./PzLink-BkfNrG4H.js";import{_ as T}from"./PzIcon-Don8TXO3.js";import{P as $}from"./PzText-LfRr6NF7.js";import"./preload-helper-C1FmrZbK.js";const l=g({name:"PzRouterLink",inheritAttrs:!1,__name:"PzRouterLink",props:{to:{},replace:{type:Boolean,default:!1},variant:{default:"primary"},target:{default:"_self"},rel:{default:void 0},disabled:{type:Boolean,default:!1},inline:{type:Boolean,default:!0},bold:{type:Boolean,default:!1},italic:{type:Boolean,default:!1},lineThrough:{type:Boolean,default:!1}},setup(e){const t=e,o=v(),r=(a,p)=>{t.disabled||t.target!=="_self"||p(a)};return(a,p)=>(y(),k(s(z),{custom:"",to:t.to,replace:t.replace},{default:n(({href:m,navigate:h})=>[x(s(L),w(s(o),{href:m,variant:t.variant,target:t.target,rel:t.rel,disabled:t.disabled,inline:t.inline,bold:t.bold,italic:t.italic,"line-through":t.lineThrough,onClick:b=>r(b,h)}),P({default:n(()=>[u(a.$slots,"default")]),_:2},[a.$slots.prefix?{name:"prefix",fn:n(()=>[u(a.$slots,"prefix")]),key:"0"}:void 0,a.$slots.suffix?{name:"suffix",fn:n(()=>[u(a.$slots,"suffix")]),key:"1"}:void 0]),1040,["href","variant","target","rel","disabled","inline","bold","italic","line-through","onClick"])]),_:3},8,["to","replace"]))}});l.__docgenInfo=Object.assign({displayName:l.name??l.__name},{name:"PzRouterLink",exportName:"default",displayName:"PzRouterLink",description:"",tags:{},props:[{name:"to",required:!0,type:{name:"PzRouterLinkTo"}},{name:"replace",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"variant",defaultValue:{func:!1,value:'"primary"'}},{name:"target",defaultValue:{func:!1,value:'"_self"'}},{name:"rel",defaultValue:{func:!1,value:"undefined"}},{name:"disabled",defaultValue:{func:!1,value:"false"}},{name:"inline",defaultValue:{func:!1,value:"true"}},{name:"bold",defaultValue:{func:!1,value:"false"}},{name:"italic",defaultValue:{func:!1,value:"false"}},{name:"lineThrough",defaultValue:{func:!1,value:"false"}}],slots:[{name:"prefix"},{name:"default"},{name:"suffix"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/PzRouterLink/PzRouterLink.vue"]});const A=e=>{const o=[`to="${typeof e.to=="string"?e.to:JSON.stringify(e.to)}"`,e.variant!=="primary"?`variant="${e.variant}"`:null,e.target!=="_self"?`target="${e.target}"`:null,e.disabled?':disabled="true"':null,e.inline===!1?':inline="false"':null,e.bold?':bold="true"':null,e.italic?':italic="true"':null,e.lineThrough?':line-through="true"':null,e.replace?':replace="true"':null].filter(a=>!!a).join(" "),r=[e.showPrefix?`    <template #prefix>
+      <PzIcon name="arrow_back" size="16" />
+    </template>`:null,`    ${e.label}`,e.showSuffix?`    <template #suffix>
+      <PzIcon name="arrow_forward" size="16" />
+    </template>`:null].filter(a=>!!a);return`<template>
+  <PzRouterLink ${o}>
+${r.join(`
+`)}
+  </PzRouterLink>
+</template>`},B={title:"Components/Actions/PzRouterLink",component:l,parameters:{prototype:{caption:"Router-aware link component",note:"Use `PzRouterLink` for in-app navigation with vue-router while keeping the same visual API as `PzLink`."},docs:{description:{component:"Use `PzRouterLink` when navigation should stay inside a Vue Router application without forcing a full page reload. It wraps `PzLink` and forwards the same visual props and slots."},source:{transform:(e,t)=>A(t.args??B.args)}}},args:{to:"/tenders/active",variant:"primary",target:"_self",disabled:!1,inline:!0,bold:!1,italic:!1,lineThrough:!1,replace:!1,label:"Open active tenders",showPrefix:!1,showSuffix:!0},argTypes:{to:{control:"text",description:"Vue Router target location."},variant:{control:"inline-radio",options:V,description:"Visual link treatment."},target:{control:"select",options:S,description:"Anchor target attribute. `_self` keeps router navigation enabled."},disabled:{control:"boolean",description:"Prevents navigation and applies disabled styling."},inline:{control:"boolean",description:"Renders inline-flex or block flex layout."},bold:{control:"boolean",description:"Applies stronger text weight."},italic:{control:"boolean",description:"Applies italic text style."},lineThrough:{control:"boolean",description:"Adds line-through decoration to the content."},replace:{control:"boolean",description:"Uses router replace navigation instead of push."},label:{control:"text",description:"Slot content preview text.",table:{category:"Slots"}},showPrefix:{control:"boolean",description:"Shows a prefix icon slot in the preview.",table:{category:"Slots"}},showSuffix:{control:"boolean",description:"Shows a suffix icon slot in the preview.",table:{category:"Slots"}}},render:e=>({components:{pzRouterLink:l,pzIcon:T,pzText:$},setup(){const t=_(),o=R(()=>t.fullPath);return{args:e,currentPath:o}},template:`
+      <div class="pz-link-story">
+        <section class="pz-link-story-board">
+          <div class="pz-link-story-header">
+            <div>
+              <span class="pz-link-story-eyebrow">Router API</span>
+              <pz-text variant="h4-bold">SPA navigation wrapper</pz-text>
+            </div>
+            <span class="pz-link-story-chip">{{ currentPath }}</span>
+          </div>
+
+          <div class="pz-link-story-preview">
+            <pz-router-link
+              :to="args.to"
+              :variant="args.variant"
+              :target="args.target"
+              :disabled="args.disabled"
+              :inline="args.inline"
+              :bold="args.bold"
+              :italic="args.italic"
+              :line-through="args.lineThrough"
+              :replace="args.replace"
+            >
+              <template v-if="args.showPrefix" #prefix>
+                <pz-icon
+                  name="arrow_back"
+                  size="16"
+                  label="Router link prefix icon"
+                />
+              </template>
+
+              {{ args.label }}
+
+              <template v-if="args.showSuffix" #suffix>
+                <pz-icon
+                  name="arrow_forward"
+                  size="16"
+                  label="Router link suffix icon"
+                />
+              </template>
+            </pz-router-link>
+          </div>
+        </section>
+      </div>
+    `})},i={};var c,f,d;i.parameters={...i.parameters,docs:{...(c=i.parameters)==null?void 0:c.docs,source:{originalSource:"{}",...(d=(f=i.parameters)==null?void 0:f.docs)==null?void 0:d.source}}};const q=["Playground"];export{i as Playground,q as __namedExportsOrder,B as default};

package/dist/app/assets/PzScrollTo-GAEPiQFO.css

@@ -0,0 +1 @@
+.pz-scroll-to-story{display:grid;gap:24px}.pz-scroll-to-story-toolbar,.pz-scroll-to-story-section,.pz-scroll-to-story-method-card,.pz-scroll-to-story-type-card{padding:clamp(24px,3vw,32px);border:1px solid color-mix(in srgb,var(--pz-color-grey-40) 58%,transparent);border-radius:28px;background:linear-gradient(180deg,color-mix(in srgb,var(--pz-color-white) 98%,transparent),color-mix(in srgb,var(--pz-color-grey-40) 10%,var(--pz-color-white))),linear-gradient(135deg,color-mix(in srgb,var(--pz-color-blue-50) 4%,transparent),transparent 42%);box-shadow:0 18px 60px color-mix(in srgb,var(--pz-color-black-90) 8%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 96%,transparent)}.pz-scroll-to-story-toolbar,.pz-scroll-to-story-copy,.pz-scroll-to-story-methods,.pz-scroll-to-story-types,.pz-scroll-to-story-section,.pz-scroll-to-story-stack{display:grid;gap:16px}.pz-scroll-to-story-toolbar{position:sticky;top:16px;z-index:3}.pz-scroll-to-story-actions{display:flex;flex-wrap:wrap;gap:12px;padding:12px;border:1px solid color-mix(in srgb,var(--pz-color-grey-40) 56%,transparent);border-radius:16px;background:color-mix(in srgb,var(--pz-color-white) 92%,transparent)}.pz-scroll-to-story-methods,.pz-scroll-to-story-types{grid-template-columns:repeat(2,minmax(0,1fr))}.pz-scroll-to-story-method-card,.pz-scroll-to-story-type-card,.pz-scroll-to-story-method-header{display:grid;gap:12px}.pz-scroll-to-story-eyebrow,.pz-scroll-to-story-kicker{display:inline-flex;width:fit-content;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pz-color-text-link-hover)}.pz-scroll-to-story-button{height:40px;padding:0 16px;border:1px solid var(--pz-color-button-primary);border-radius:4px;background:var(--pz-color-button-primary);color:var(--pz-color-white);cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease;font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-scroll-to-story-button:hover,.pz-scroll-to-story-button:focus-visible{border-color:var(--pz-color-button-primary-hover);background:var(--pz-color-button-primary-hover);outline:none}.pz-scroll-to-story-button--ghost{border-color:color-mix(in srgb,var(--pz-color-grey-60) 56%,transparent);background:var(--pz-color-white);color:var(--pz-color-text-primary)}.pz-scroll-to-story-paper{min-height:240px;border-radius:12px;background:linear-gradient(color-mix(in srgb,var(--pz-color-blue-50) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--pz-color-blue-50) 4%,transparent) 1px,transparent 1px),linear-gradient(180deg,#fff,#f9fbff);background-size:100% 28px,28px 100%,100% 100%}.pz-scroll-to-story-code{margin:0;padding:16px;border-radius:12px;background:color-mix(in srgb,var(--pz-color-black-90) 4%,var(--pz-color-white));overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--pz-font-size-12);font-weight:400;line-height:1.5}.pz-scroll-to-highlight{box-shadow:0 0 0 3px color-mix(in srgb,var(--pz-color-blue-50) 22%,transparent),0 18px 48px color-mix(in srgb,var(--pz-color-black-90) 10%,transparent)}@media (width <= 1024px){.pz-scroll-to-story-methods,.pz-scroll-to-story-types{grid-template-columns:1fr}}@media (width <= 640px){.pz-scroll-to-story-toolbar,.pz-scroll-to-story-section,.pz-scroll-to-story-method-card,.pz-scroll-to-story-type-card{padding:20px;border-radius:22px}.pz-scroll-to-story-toolbar{top:8px}}