@prozorro/prozorro-ui 0.0.8 → 0.0.9-beta

package/dist/app/assets/{Grid.stories-DCpTvq1h.js → Grid.stories-CDiFrqKQ.js}

@@ -1,4 +1,4 @@
-import{P as a}from"./PzText-LfRr6NF7.js";import"./iframe-XnrfGA2g.js";import"./preload-helper-C1FmrZbK.js";const n=[{title:"Mobile",range:"< 768px",viewport:"375px frame",columns:4,gutter:"16px",margin:"16px",frame:"100%",className:"grid-foundation-demo-mobile"},{title:"Tablet",range:">= 768px",viewport:"768px frame",columns:8,gutter:"24px",margin:"32px",frame:"768px",className:"grid-foundation-demo-tablet"},{title:"Desktop",range:">= 1200px",viewport:"1440px frame",columns:12,gutter:"24px",margin:"80px",frame:"1440px",className:"grid-foundation-demo-desktop"}],d=[{name:".pz-container",type:"Layout",description:"Centered frame with responsive horizontal margins and a max width derived from grid tokens."},{name:".pz-container-fluid",type:"Layout",description:"Full-width container that keeps responsive side padding."},{name:".pz-grid",type:"Layout",description:"Responsive column grid using the active token set for columns and gutter."},{name:".pz-grid-fit",type:"Variant",description:"Auto-fit layout for equal cards when fixed column spans are not needed."},{name:".pz-col-1 ... .pz-col-12",type:"Span",description:"Column span utilities for the current layout context."},{name:".pz-col-md-* / .pz-col-xl-*",type:"Responsive span",description:"Breakpoint overrides for tablet and desktop layout changes."},{name:".pz-start-*",type:"Start",description:"Column start utilities for offset and alignment control."}],s=[{name:"@include pz-container",type:"Mixin",description:"Applies the container width and side padding contract inside component styles."},{name:"@include pz-grid",type:"Mixin",description:"Creates a grid that follows the active token-driven column and gap system."},{name:"@include pz-grid-span($span)",type:"Mixin",description:"Applies a specific column span without reaching for utility classes."}],p={title:"Foundation/Grid",parameters:{prototype:{caption:"Grid system",note:"Responsive layout foundation for containers, columns, spans, and offsets."},docs:{description:{component:"Grid system reference for `@prozorro/prozorro-ui`. The live Figma embed for node `14:221` was unavailable anonymously, so this implementation aligns the grid with the repository breakpoint model and documents the resulting library contract."}}},render:()=>({components:{pzText:a},setup(){return{breakpointSpecs:n,utilityRows:d,mixinRows:s}},template:`
+import{P as a}from"./PzText-Qtpayc5y.js";import"./iframe-B7Bddli1.js";import"./preload-helper-C1FmrZbK.js";const n=[{title:"Mobile",range:"< 768px",viewport:"375px frame",columns:4,gutter:"16px",margin:"16px",frame:"100%",className:"grid-foundation-demo-mobile"},{title:"Tablet",range:">= 768px",viewport:"768px frame",columns:8,gutter:"24px",margin:"32px",frame:"768px",className:"grid-foundation-demo-tablet"},{title:"Desktop",range:">= 1200px",viewport:"1440px frame",columns:12,gutter:"24px",margin:"80px",frame:"1440px",className:"grid-foundation-demo-desktop"}],d=[{name:".pz-container",type:"Layout",description:"Centered frame with responsive horizontal margins and a max width derived from grid tokens."},{name:".pz-container-fluid",type:"Layout",description:"Full-width container that keeps responsive side padding."},{name:".pz-grid",type:"Layout",description:"Responsive column grid using the active token set for columns and gutter."},{name:".pz-grid-fit",type:"Variant",description:"Auto-fit layout for equal cards when fixed column spans are not needed."},{name:".pz-col-1 ... .pz-col-12",type:"Span",description:"Column span utilities for the current layout context."},{name:".pz-col-md-* / .pz-col-xl-*",type:"Responsive span",description:"Breakpoint overrides for tablet and desktop layout changes."},{name:".pz-start-*",type:"Start",description:"Column start utilities for offset and alignment control."}],s=[{name:"@include pz-container",type:"Mixin",description:"Applies the container width and side padding contract inside component styles."},{name:"@include pz-grid",type:"Mixin",description:"Creates a grid that follows the active token-driven column and gap system."},{name:"@include pz-grid-span($span)",type:"Mixin",description:"Applies a specific column span without reaching for utility classes."}],p={title:"Foundation/Grid",parameters:{prototype:{caption:"Grid system",note:"Responsive layout foundation for containers, columns, spans, and offsets."},docs:{description:{component:"Grid system reference for `@prozorro/prozorro-ui`. The live Figma embed for node `14:221` was unavailable anonymously, so this implementation aligns the grid with the repository breakpoint model and documents the resulting library contract."}}},render:()=>({components:{pzText:a},setup(){return{breakpointSpecs:n,utilityRows:d,mixinRows:s}},template:`
       <div class="grid-foundation">
         <section class="grid-foundation-board">
           <header class="grid-foundation-hero">

package/dist/app/assets/PzAccordion-ChXTPL78.css

@@ -0,0 +1 @@
+.pz-accordion-story{display:grid;gap:var(--pz-space-24)}.pz-accordion-story-board{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-accordion-story-header,.pz-accordion-story-offer,.pz-accordion-story-definition-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--pz-space-16)}.pz-accordion-story-copy,.pz-accordion-story-body,.pz-accordion-story-sections,.pz-accordion-story-section,.pz-accordion-story-offer-main,.pz-accordion-story-offer-price{display:grid;gap:var(--pz-space-12)}.pz-accordion-story-eyebrow,.pz-accordion-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-accordion-story-preview{padding:var(--pz-space-24);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-accordion-story-title,.pz-accordion-story-subtitle,.pz-accordion-story-paragraph,.pz-accordion-story-offer-id,.pz-accordion-story-offer-caption,.pz-accordion-story-definition-row dt,.pz-accordion-story-definition-row dd{margin:0}.pz-accordion-story-title,.pz-accordion-story-subtitle,.pz-accordion-story-offer-name,.pz-accordion-story-offer-value{color:var(--pz-color-text-primary)}.pz-accordion-story-title{font-size:var(--pz-font-size-18);font-weight:700;line-height:1.5}.pz-accordion-story-subtitle,.pz-accordion-story-offer-name{font-size:var(--pz-font-size-14);font-weight:700;line-height:1.5}.pz-accordion-story-paragraph,.pz-accordion-story-offer-id,.pz-accordion-story-offer-caption,.pz-accordion-story-definition-row dt,.pz-accordion-story-definition-row dd{color:var(--pz-color-text-secondary);font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-accordion-story-offer-value{color:var(--pz-color-status-active);font-size:var(--pz-font-size-18);font-weight:600;line-height:1.5}.pz-accordion-story-definition-list{display:grid;gap:var(--pz-space-16);margin:0}.pz-accordion-story-definition-row{padding-bottom:var(--pz-space-8);border-bottom:1px dotted color-mix(in srgb,var(--pz-color-grey-30) 88%,transparent)}.pz-accordion-story-definition-row dt{flex:0 0 32%;color:var(--pz-color-text-primary);font-weight:600}.pz-accordion-story-definition-row dd{flex:1 1 auto;color:var(--pz-color-text-primary)}@media (width <= 900px){.pz-accordion-story-header,.pz-accordion-story-offer,.pz-accordion-story-definition-row{flex-direction:column}.pz-accordion-story-definition-row dt{flex-basis:auto}}

package/dist/app/assets/PzAccordion-DTiV4JOM.js

@@ -0,0 +1 @@
+import{d as p,e as o,l as i,F as g,p as y,s as c,j as r,f as _,k as b,o as a,h,E as P,x as V,t as x,m as f,w as C,g as w}from"./iframe-B7Bddli1.js";import{_ as A}from"./PzIcon-Drlqf9PC.js";import{P as k}from"./PzSkeleton-DnpztBv3.js";import{_ as z}from"./PzText-Qtpayc5y.js";const B=[{id:"line-1",width:"187px"},{id:"line-2",width:"242px"},{id:"line-3",width:"169px"},{id:"line-4",width:"364px"},{id:"line-5",width:"481px"},{id:"line-6",width:"436px"},{id:"line-7",width:"436px"},{id:"line-8",width:"436px"},{id:"line-9",width:"481px"}],N={key:0,class:"pz-accordion-content__transition"},$={key:0,class:"pz-accordion-content__loader"},q={key:1},t=p({name:"PzAccordionContent",__name:"PzAccordionContent",props:{active:{type:Boolean},loading:{type:Boolean,default:!1},contentClass:{default:""}},setup(e){return(s,u)=>e.active?(a(),o("div",N,[i("div",{class:_(["pz-accordion-content__surface",e.contentClass])},[e.loading?(a(),o("div",$,[(a(!0),o(g,null,y(c(B),n=>(a(),h(c(k),{key:n.id,width:n.width,height:"24px"},null,8,["width"]))),128))])):(a(),o("div",q,[r(s.$slots,"default",{},void 0,!0)]))],2)])):b("",!0)}}),j=z(t,[["__scopeId","data-v-8dc15c3b"]]);t.__docgenInfo=Object.assign({displayName:t.name??t.__name},{name:"PzAccordionContent",exportName:"default",displayName:"PzAccordionContent",description:"",tags:{},props:[{name:"active",required:!0,type:{name:"boolean"}},{name:"loading",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"contentClass",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}}],slots:[{name:"default"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/PzAccordion/PzAccordionContent.vue"]});const I=["aria-expanded","disabled"],F={class:"pz-accordion__trigger-content"},S={key:0,class:"pz-accordion__label"},l=p({name:"PzAccordion",__name:"PzAccordion",props:{modelValue:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},label:{default:""},disabled:{type:Boolean,default:!1},contentClass:{default:""}},emits:["update:modelValue"],setup(e,{emit:s}){const u=s,n=e,m=()=>{n.disabled||u("update:modelValue",!n.modelValue)},v=w(()=>({active:n.modelValue,disabled:n.disabled,toggle:m}));return(d,E)=>(a(),o("div",{class:_(["pz-accordion",{"pz-accordion--open":e.modelValue,disabled:e.disabled}])},[i("button",{type:"button",class:"pz-accordion__trigger","aria-expanded":e.modelValue,disabled:e.disabled,onClick:m},[i("span",F,[d.$slots.trigger?r(d.$slots,"trigger",P(V({key:0},v.value)),void 0,!0):(a(),o(g,{key:1},[e.label?(a(),o("span",S,x(e.label),1)):b("",!0)],64))]),f(c(A),{name:"expand_more",size:"20",class:"pz-accordion__icon"})],8,I),f(j,{active:e.modelValue,"content-class":e.contentClass,loading:e.loading},{default:C(()=>[r(d.$slots,"default",{},void 0,!0)]),_:3},8,["active","content-class","loading"])],2))}}),G=z(l,[["__scopeId","data-v-f42dc441"]]);l.__docgenInfo=Object.assign({displayName:l.name??l.__name},{name:"PzAccordion",exportName:"default",displayName:"PzAccordion",description:"",tags:{},props:[{name:"modelValue",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"loading",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"label",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"disabled",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"contentClass",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}}],slots:[{name:"trigger",scoped:!0,bindings:[]},{name:"default"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/PzAccordion/PzAccordion.vue"]});export{G as P,j as a};

package/dist/app/assets/PzAccordion-hujlMYpG.css

@@ -0,0 +1 @@
+.pz-accordion-content[data-v-8dc15c3b]{--margin: var(--pz-space-4)}.pz-accordion-content__transition[data-v-8dc15c3b]{width:100%}.pz-accordion-content__loader[data-v-8dc15c3b]{display:grid;gap:var(--pz-space-8)}.pz-accordion-content__surface[data-v-8dc15c3b]{width:100%;margin-top:var(--margin);margin-bottom:var(--margin)}@media (min-width: 1024px){.pz-accordion-content__surface[data-v-8dc15c3b]{--margin: var(--pz-space-8)}}.pz-accordion[data-v-f42dc441]{border-top:1px solid var(--pz-color-stroke-grey);border-bottom:1px solid var(--pz-color-stroke-grey)}.pz-accordion+.pz-accordion[data-v-f42dc441]{border-top-width:0}.pz-accordion__trigger[data-v-f42dc441]{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--pz-space-16);width:100%;padding:var(--pz-space-16) 0 var(--pz-space-24) 0;border:0;background:transparent;color:var(--pz-color-text-primary);text-align:left;cursor:pointer}.pz-accordion__trigger[data-v-f42dc441]:focus-visible{outline:2px solid var(--pz-color-blue-50);outline-offset:2px}.pz-accordion__trigger[data-v-f42dc441]:hover:not(:disabled){background-color:color-mix(in srgb,var(--pz-color-blue-10) 72%,transparent)}.pz-accordion__trigger[data-v-f42dc441]:disabled{cursor:default}.pz-accordion__trigger-content[data-v-f42dc441]{flex:1 1 auto;min-width:0}.pz-accordion__label[data-v-f42dc441]{display:inline-flex;align-items:center;min-width:0;font-size:var(--pz-font-size-14);font-weight:600;line-height:1.5}.pz-accordion__icon[data-v-f42dc441]{flex:0 0 auto;margin-top:2px;color:var(--pz-color-text-secondary)}.pz-accordion--open .pz-accordion__icon[data-v-f42dc441]{transform:rotate(180deg);color:var(--pz-color-text-primary)}.pz-accordion.disabled[data-v-f42dc441]{opacity:.7}

package/dist/app/assets/PzAccordion.stories-DxsYsHwE.js

@@ -0,0 +1,322 @@
+import{r as S}from"./iframe-B7Bddli1.js";import{P as c}from"./PzAccordion-DTiV4JOM.js";import{P}from"./PzLink-BU7dMeUw.js";import{P as A}from"./PzStatus-dVlplKB_.js";import{P as w}from"./PzText-Qtpayc5y.js";import"./preload-helper-C1FmrZbK.js";import"./PzIcon-Drlqf9PC.js";import"./PzSkeleton-DnpztBv3.js";const V={supplier:'ТОВАРИСТВО З ОБМЕЖЕНОЮ ВІДПОВІДАЛЬНІСТЮ "ЕКО ЦЕНТР ПРОЕКТ"',identifier:"#43194460 (UA-EDR)",amountLabel:"Остаточна пропозиція:",amountValue:"98 000,00 UAH",statusLabel:"Переможець"},x=[{id:"name",label:"Найменування:",value:'ТОВАРИСТВО З ОБМЕЖЕНОЮ ВІДПОВІДАЛЬНІСТЮ "ЕКО ЦЕНТР ПРОЕКТ"'},{id:"code",label:"Ідентифікаційний код:",value:"#43194460 (UA-EDR)"},{id:"location",label:"Місцезнаходження:",value:"79008, Україна, Львівська область, місто Львів, ВУЛИЦЯ П.БЕРИНДИ будинок 3 квартира 4"},{id:"category",label:"Класифікація суб’єктів господарювання:",value:"Суб'єкт малого підприємництва"}],i="<\/script>",k=o=>{const e=['v-model="isOpen"',o.label?`label="${o.label}"`:null,o.disabled?':disabled="true"':null,o.loading?':loading="true"':null,o.contentClass?`content-class="${o.contentClass}"`:null].filter(a=>!!a).join(`
+    `);return`<script setup lang="ts">
+import { ref } from "vue";
+
+const isOpen = ref(${o.modelValue??!1});
+${i}
+
+<template>
+  <PzAccordion
+    ${e}
+  >
+    Accordion body content
+  </PzAccordion>
+</template>`},O=`<script setup lang="ts">
+import { ref } from "vue";
+
+const isOpen = ref(true);
+${i}
+
+<template>
+  <PzAccordion v-model="isOpen">
+    <template #trigger="{ active }">
+      <div class="offer-summary">
+        <div>
+          <strong>ТОВ "ЕКО ЦЕНТР ПРОЕКТ"</strong>
+          <span>#43194460 (UA-EDR)</span>
+        </div>
+
+        <div>
+          <span>Остаточна пропозиція:</span>
+          <strong>98 000,00 UAH</strong>
+        </div>
+
+        <PzStatus variant="active">
+          {{ active ? "Переможець" : "Переможець" }}
+        </PzStatus>
+      </div>
+    </template>
+
+    <div>Accordion content</div>
+  </PzAccordion>
+</template>`,L=`<script setup lang="ts">
+import { ref } from "vue";
+
+const isOpen = ref(true);
+const loading = ref(true);
+${i}
+
+<template>
+  <PzAccordion
+    v-model="isOpen"
+    label="Завантаження деталей рішення"
+    :loading="loading"
+  >
+    Деталі рішення після завантаження
+  </PzAccordion>
+</template>`,T={title:"Components/Layouts/PzAccordion",component:c,parameters:{prototype:{caption:"PzAccordion",note:"Disclosure component for procurement sections with a simple label, a custom trigger slot, and a built-in loading state."},docs:{description:{component:"Use `PzAccordion` for collapsible procurement sections. The public API is intentionally small: control it with `v-model`, provide a fallback `label`, use `loading` for built-in skeleton content, and switch to the `trigger` slot for richer headers."},source:{transform:(o,e)=>k(e.args??T.args)}}},args:{modelValue:!1,label:"Додаткові умови проведення закупівлі",disabled:!1,loading:!1,contentClass:""},argTypes:{modelValue:{control:"boolean",description:"Controls the expanded state. Use with `v-model`."},label:{control:"text",description:"Fallback trigger label when the `trigger` slot is not used."},disabled:{control:"boolean",description:"Disables interaction and prevents toggling."},loading:{control:"boolean",description:"Replaces body content with the built-in skeleton loader while the accordion stays open."},contentClass:{control:"text",description:"Optional class applied to the content surface wrapper."}},render:o=>({components:{pzAccordion:c,pzText:w},setup(){return{args:o,updateModelValue:a=>{o.modelValue=a}}},template:`
+      <div class="pz-accordion-story">
+        <section class="pz-accordion-story-board">
+          <div class="pz-accordion-story-header">
+            <div class="pz-accordion-story-copy">
+              <span class="pz-accordion-story-eyebrow">Component API</span>
+              <pz-text variant="h4-bold">Disclosure surface with procurement-first defaults</pz-text>
+            </div>
+            <span class="pz-accordion-story-chip">{{ args.modelValue ? "open" : "closed" }}</span>
+          </div>
+
+          <div class="pz-accordion-story-preview">
+            <pz-accordion
+              :model-value="args.modelValue"
+              :label="args.label"
+              :disabled="args.disabled"
+              :loading="args.loading"
+              :content-class="args.contentClass"
+              @update:model-value="updateModelValue"
+            >
+              <div class="pz-accordion-story-body">
+                <p class="pz-accordion-story-paragraph">
+                  Використовуйте PzAccordion для секцій, де заголовок показує короткий підсумок, а тіло розкриває деталі рішення, пропозиції або умов закупівлі.
+                </p>
+                <p class="pz-accordion-story-paragraph">
+                  Якщо потрібна складніша шапка, переходьте на слот <code>#trigger</code>. Якщо контент ще завантажується, вмикайте прапорець <code>loading</code>.
+                </p>
+              </div>
+            </pz-accordion>
+          </div>
+        </section>
+      </div>
+    `})},n={},r={parameters:{docs:{source:{code:O}}},render:()=>({components:{pzAccordion:c,pzLink:P,pzStatus:A},setup(){return{isOpen:S(!0),participantRows:x,winnerSummary:V}},template:`
+      <div class="pz-accordion-story">
+        <section class="pz-accordion-story-board">
+          <div class="pz-accordion-story-header">
+            <div class="pz-accordion-story-copy">
+              <span class="pz-accordion-story-eyebrow">Usage example</span>
+              <h3 class="pz-accordion-story-title">Winner offer summary with a custom trigger</h3>
+            </div>
+          </div>
+
+          <div class="pz-accordion-story-preview">
+            <pz-accordion v-model="isOpen">
+              <template #trigger>
+                <div class="pz-accordion-story-offer">
+                  <div class="pz-accordion-story-offer-main">
+                    <strong class="pz-accordion-story-offer-name">{{ winnerSummary.supplier }}</strong>
+                    <span class="pz-accordion-story-offer-id">{{ winnerSummary.identifier }}</span>
+                  </div>
+
+                  <div class="pz-accordion-story-offer-price">
+                    <span class="pz-accordion-story-offer-caption">{{ winnerSummary.amountLabel }}</span>
+                    <strong class="pz-accordion-story-offer-value">{{ winnerSummary.amountValue }}</strong>
+                  </div>
+
+                  <pz-status variant="active">
+                    {{ winnerSummary.statusLabel }}
+                  </pz-status>
+                </div>
+              </template>
+
+              <div class="pz-accordion-story-sections">
+                <section class="pz-accordion-story-section">
+                  <h4 class="pz-accordion-story-subtitle">Інформація про учасника</h4>
+
+                  <dl class="pz-accordion-story-definition-list">
+                    <div
+                      v-for="row in participantRows"
+                      :key="row.id"
+                      class="pz-accordion-story-definition-row"
+                    >
+                      <dt>{{ row.label }}</dt>
+                      <dd>{{ row.value }}</dd>
+                    </div>
+                  </dl>
+                </section>
+
+                <section class="pz-accordion-story-section">
+                  <h4 class="pz-accordion-story-subtitle">Наступні дії</h4>
+                  <p class="pz-accordion-story-paragraph">17 квітня 2026 • 12:39</p>
+                  <pz-link href="https://prozorro.gov.ua">
+                    Що робити після перемоги в аукціоні
+                  </pz-link>
+                </section>
+              </div>
+            </pz-accordion>
+          </div>
+        </section>
+      </div>
+    `})},s={args:{modelValue:!0,label:"Завантаження деталей рішення",loading:!0},parameters:{docs:{source:{code:L}}},render:o=>({components:{pzAccordion:c,pzText:w},setup(){return{args:o,updateModelValue:a=>{o.modelValue=a}}},template:`
+      <div class="pz-accordion-story">
+        <section class="pz-accordion-story-board">
+          <div class="pz-accordion-story-header">
+            <div class="pz-accordion-story-copy">
+              <span class="pz-accordion-story-eyebrow">Usage example</span>
+              <pz-text variant="h4-bold">Built-in loading state</pz-text>
+            </div>
+          </div>
+
+          <div class="pz-accordion-story-preview">
+            <pz-accordion
+              :model-value="args.modelValue"
+              :label="args.label"
+              :loading="args.loading"
+              @update:model-value="updateModelValue"
+            >
+              <div class="pz-accordion-story-body">
+                <p class="pz-accordion-story-paragraph">
+                  Після завершення завантаження секція залишається відкритою та одразу показує фактичний вміст.
+                </p>
+                <p class="pz-accordion-story-paragraph">
+                  Це підходить для асинхронних блоків рішень, кваліфікації або історії обробки документів.
+                </p>
+              </div>
+            </pz-accordion>
+          </div>
+        </section>
+      </div>
+    `})},t={args:{modelValue:!1,label:"Архівна секція без взаємодії",disabled:!0}};var d,l,p;n.parameters={...n.parameters,docs:{...(d=n.parameters)==null?void 0:d.docs,source:{originalSource:"{}",...(p=(l=n.parameters)==null?void 0:l.docs)==null?void 0:p.source}}};var u,m,z;r.parameters={...r.parameters,docs:{...(u=r.parameters)==null?void 0:u.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      source: {
+        code: customTriggerSource
+      }
+    }
+  },
+  render: () => ({
+    components: {
+      pzAccordion: PzAccordion,
+      pzLink: PzLink,
+      pzStatus: PzStatus
+    },
+    setup() {
+      const isOpen = ref(true);
+      return {
+        isOpen,
+        participantRows,
+        winnerSummary
+      };
+    },
+    template: \`
+      <div class="pz-accordion-story">
+        <section class="pz-accordion-story-board">
+          <div class="pz-accordion-story-header">
+            <div class="pz-accordion-story-copy">
+              <span class="pz-accordion-story-eyebrow">Usage example</span>
+              <h3 class="pz-accordion-story-title">Winner offer summary with a custom trigger</h3>
+            </div>
+          </div>
+
+          <div class="pz-accordion-story-preview">
+            <pz-accordion v-model="isOpen">
+              <template #trigger>
+                <div class="pz-accordion-story-offer">
+                  <div class="pz-accordion-story-offer-main">
+                    <strong class="pz-accordion-story-offer-name">{{ winnerSummary.supplier }}</strong>
+                    <span class="pz-accordion-story-offer-id">{{ winnerSummary.identifier }}</span>
+                  </div>
+
+                  <div class="pz-accordion-story-offer-price">
+                    <span class="pz-accordion-story-offer-caption">{{ winnerSummary.amountLabel }}</span>
+                    <strong class="pz-accordion-story-offer-value">{{ winnerSummary.amountValue }}</strong>
+                  </div>
+
+                  <pz-status variant="active">
+                    {{ winnerSummary.statusLabel }}
+                  </pz-status>
+                </div>
+              </template>
+
+              <div class="pz-accordion-story-sections">
+                <section class="pz-accordion-story-section">
+                  <h4 class="pz-accordion-story-subtitle">Інформація про учасника</h4>
+
+                  <dl class="pz-accordion-story-definition-list">
+                    <div
+                      v-for="row in participantRows"
+                      :key="row.id"
+                      class="pz-accordion-story-definition-row"
+                    >
+                      <dt>{{ row.label }}</dt>
+                      <dd>{{ row.value }}</dd>
+                    </div>
+                  </dl>
+                </section>
+
+                <section class="pz-accordion-story-section">
+                  <h4 class="pz-accordion-story-subtitle">Наступні дії</h4>
+                  <p class="pz-accordion-story-paragraph">17 квітня 2026 • 12:39</p>
+                  <pz-link href="https://prozorro.gov.ua">
+                    Що робити після перемоги в аукціоні
+                  </pz-link>
+                </section>
+              </div>
+            </pz-accordion>
+          </div>
+        </section>
+      </div>
+    \`
+  })
+}`,...(z=(m=r.parameters)==null?void 0:m.docs)==null?void 0:z.source}}};var v,y,g;s.parameters={...s.parameters,docs:{...(v=s.parameters)==null?void 0:v.docs,source:{originalSource:`{
+  args: {
+    modelValue: true,
+    label: "Завантаження деталей рішення",
+    loading: true
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: loadingSource
+      }
+    }
+  },
+  render: (args: PzAccordionStoryArgs) => ({
+    components: {
+      pzAccordion: PzAccordion,
+      pzText: PzText
+    },
+    setup() {
+      const updateModelValue = (value: boolean): void => {
+        args.modelValue = value;
+      };
+      return {
+        args,
+        updateModelValue
+      };
+    },
+    template: \`
+      <div class="pz-accordion-story">
+        <section class="pz-accordion-story-board">
+          <div class="pz-accordion-story-header">
+            <div class="pz-accordion-story-copy">
+              <span class="pz-accordion-story-eyebrow">Usage example</span>
+              <pz-text variant="h4-bold">Built-in loading state</pz-text>
+            </div>
+          </div>
+
+          <div class="pz-accordion-story-preview">
+            <pz-accordion
+              :model-value="args.modelValue"
+              :label="args.label"
+              :loading="args.loading"
+              @update:model-value="updateModelValue"
+            >
+              <div class="pz-accordion-story-body">
+                <p class="pz-accordion-story-paragraph">
+                  Після завершення завантаження секція залишається відкритою та одразу показує фактичний вміст.
+                </p>
+                <p class="pz-accordion-story-paragraph">
+                  Це підходить для асинхронних блоків рішень, кваліфікації або історії обробки документів.
+                </p>
+              </div>
+            </pz-accordion>
+          </div>
+        </section>
+      </div>
+    \`
+  })
+}`,...(g=(y=s.parameters)==null?void 0:y.docs)==null?void 0:g.source}}};var f,b,h;t.parameters={...t.parameters,docs:{...(f=t.parameters)==null?void 0:f.docs,source:{originalSource:`{
+  args: {
+    modelValue: false,
+    label: "Архівна секція без взаємодії",
+    disabled: true
+  }
+}`,...(h=(b=t.parameters)==null?void 0:b.docs)==null?void 0:h.source}}};const _=["Playground","CustomTrigger","LoadingState","DisabledState"];export{r as CustomTrigger,t as DisabledState,s as LoadingState,n as Playground,_ as __namedExportsOrder,T as default};

package/dist/app/assets/PzAccordionTable-CsabBugL.css

@@ -0,0 +1 @@
+.pz-accordion-table-wrap[data-v-b95525d7]{width:100%;overflow-x:auto}.pz-accordion-table[data-v-b95525d7]{width:100%;border-collapse:collapse;table-layout:fixed;color:var(--pz-color-text-primary);font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}@media (max-width: 1023.98px){.pz-accordion-table__head[data-v-b95525d7]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}}.pz-accordion-table__row[data-v-b95525d7]{position:relative;border-bottom:1px solid var(--pz-color-stroke-grey)}.pz-accordion-table__row.open[data-v-b95525d7]{border-bottom-width:0}.pz-accordion-table__row.expandable[data-v-b95525d7]:hover{background-color:color-mix(in srgb,var(--pz-color-blue-10) 72%,transparent);cursor:pointer}.pz-accordion-table__row--sub-row[data-v-b95525d7]{border-bottom-width:0}@media (max-width: 1023.98px){.pz-accordion-table__row--sub-row[data-v-b95525d7]{display:block}}.pz-accordion-table__row--sub-row-open[data-v-b95525d7]{border-bottom-width:1px}@media (max-width: 1023.98px){.pz-accordion-table__row[data-v-b95525d7]{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pz-space-8);padding-block:var(--pz-space-16)}}@media (max-width: 1023.98px){.pz-accordion-table__cell--first-col[data-v-b95525d7]{padding-right:var(--pz-space-40)}}.pz-accordion-table__toggle-head[data-v-b95525d7]{width:48px}.pz-accordion-table__toggle-cell[data-v-b95525d7]{width:48px;padding:var(--pz-space-12) 0 var(--pz-space-16) var(--pz-space-8);text-align:right;vertical-align:top}@media (max-width: 1023.98px){.pz-accordion-table__toggle-cell[data-v-b95525d7]{position:absolute;top:var(--pz-space-16);right:0;width:auto;padding:0}}.pz-accordion-table__toggle-button[data-v-b95525d7]{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--pz-color-text-secondary);cursor:pointer}.pz-accordion-table__toggle-button[data-v-b95525d7]:focus-visible{outline:2px solid var(--pz-color-blue-50);outline-offset:2px}.pz-accordion-table__toggle-button[data-v-b95525d7]:hover{background-color:color-mix(in srgb,var(--pz-color-blue-10) 72%,transparent);color:var(--pz-color-text-primary)}.pz-accordion-table__toggle-button--open[data-v-b95525d7]{color:var(--pz-color-text-primary);transform:rotate(180deg)}.pz-accordion-table__sub-row-cell[data-v-b95525d7]{padding:0}.pz-accordion-table[data-v-b95525d7] .pz-accordion-table-sub-row-surface{padding:var(--pz-space-16) 0 var(--pz-space-24);background:color-mix(in srgb,var(--pz-color-blue-10) 18%,var(--pz-color-white))}.pz-accordion-table-story{display:grid;gap:var(--pz-space-24)}.pz-accordion-table-story-board{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-accordion-table-story-header,.pz-accordion-table-story-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--pz-space-16)}.pz-accordion-table-story-copy,.pz-accordion-table-story-sub-row,.pz-accordion-table-story-detail,.pz-accordion-table-story-tags,.pz-accordion-table-story-detail-list{display:grid;gap:var(--pz-space-12)}.pz-accordion-table-story-eyebrow{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-accordion-table-story-preview{padding:var(--pz-space-24);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-accordion-table-story-detail-copy,.pz-accordion-table-story-detail-list{margin:0;color:var(--pz-color-text-secondary);font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-accordion-table-story-detail-list{padding-left:var(--pz-space-20)}@media (width <= 900px){.pz-accordion-table-story-header,.pz-accordion-table-story-detail-head{flex-direction:column}}