import{_ as c}from"./PzIcon-cRuuou9i.js";import{P as g}from"./PzText-D5PUnIjq.js";import{p as d}from"./configs-B15JgQZ-.js";import{P as o}from"./PzTag-m9mEWusc.js";import"./iframe-Bl-fVlm8.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const m=["grey","blue","green","red","grey-light"],f=["span","div","li"],v=[{variant:"grey",label:"Neutral"},{variant:"grey-light",label:"Neutral light"},{variant:"blue",label:"Information"},{variant:"green",label:"Verified"},{variant:"red",label:"Important"}],y=t=>{const e=[t.variant!=="grey"?`variant="${t.variant}"`:null,t.as!=="span"?`as="${t.as}"`:null].filter(l=>!!l).join(" "),n=t.showPrefix?`
    <template #prefix>
      <PzIcon name="sell" size="12" />
    </template>`:"",p=t.showSuffix?`
    <template #suffix>
      <PzIcon name="close" size="12" />
    </template>`:"";return`<template>
  <PzTag ${e}>${n}
    ${t.label}${p}
  </PzTag>
</template>`},z={title:"Components/Display/PzTag",component:o,parameters:{prototype:{caption:"Tag component",note:"Figma node access was blocked in this environment, so the tag styling is inferred from the existing tag token set and implemented as a compact slot-based pill."},docs:{description:{component:"Use `PzTag` for compact semantic labels. Variants map directly to the shared tag tokens, and optional prefix or suffix content should be composed through slots."},source:{transform:(t,e)=>y(e.args??z.args)}}},args:{variant:"blue",as:"span",typography:void 0,label:"Open data",showPrefix:!0,showSuffix:!1},argTypes:{variant:{control:"inline-radio",options:m,description:"Semantic tag color variant."},as:{control:"select",options:f,description:"HTML tag used for the wrapper."},typography:{control:"select",options:[void 0,...d],description:"Overrides typography using a PzText variant."},label:{control:"text",description:"Slot content preview text.",table:{category:"Slots"}},showPrefix:{control:"boolean",description:"Shows a composed prefix icon slot in the preview.",table:{category:"Slots"}},showSuffix:{control:"boolean",description:"Shows a composed suffix icon slot in the preview.",table:{category:"Slots"}}},render:t=>({components:{pzTag:o,pzText:g,pzIcon:c},setup(){return{args:t,tagReferenceItems:v}},template:`
      <div class="pz-tag-story">
        <section class="pz-tag-story-board">
          <div class="pz-tag-story-header">
            <div>
              <span class="pz-tag-story-eyebrow">Component API</span>
              <pz-text variant="h4-bold">Compact token-backed labels</pz-text>
            </div>
            <span class="pz-tag-story-chip">{{ args.variant }}</span>
          </div>

          <div class="pz-tag-story-preview">
            <pz-tag
              :variant="args.variant"
              :as="args.as"
              :typography="args.typography"
            >
              <template v-if="args.showPrefix" #prefix>
                <pz-icon
                  name="sell"
                  size="12"
                  label="Tag prefix icon"
                />
              </template>

              {{ args.label }}

              <template v-if="args.showSuffix" #suffix>
                <pz-icon
                  name="close"
                  size="12"
                  label="Tag suffix icon"
                />
              </template>
            </pz-tag>
          </div>
        </section>

        <section class="pz-tag-story-gallery">
          <div class="pz-tag-story-header">
            <div>
              <span class="pz-tag-story-eyebrow">Variants</span>
              <pz-text variant="h4-bold">Semantic labels stay easy to restyle</pz-text>
            </div>
          </div>

          <div class="pz-tag-story-grid">
            <article
              v-for="item in tagReferenceItems"
              :key="item.variant"
              class="pz-tag-story-card"
            >
              <div class="pz-tag-story-row">
                <pz-tag :variant="item.variant">{{ item.label }}</pz-tag>
              </div>
              <p class="pz-tag-story-code">.pz-tag { --pz-tag-background; --pz-tag-color; --pz-tag-radius; }</p>
            </article>
          </div>
        </section>
      </div>
    `})},a={};var s,r,i;a.parameters={...a.parameters,docs:{...(s=a.parameters)==null?void 0:s.docs,source:{originalSource:"{}",...(i=(r=a.parameters)==null?void 0:r.docs)==null?void 0:i.source}}};const S=["Playground"];export{a as Playground,S as __namedExportsOrder,z as default};
