import{P as l}from"./PzText-D5PUnIjq.js";import"./iframe-Bl-fVlm8.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const n=[{title:"Display utilities",note:"display",items:[{name:".pz-none",description:"display: none."},{name:".pz-block",description:"display: block."},{name:".pz-inline",description:"display: inline."},{name:".pz-inline-block",description:"display: inline-block."},{name:".pz-flex",description:"display: flex."},{name:".pz-inline-flex",description:"display: inline-flex."}]},{title:"Vertical alignment modifiers",note:"align-items",items:[{name:".pz-flex--vertical-start",description:"align-items: flex-start."},{name:".pz-flex--vertical-center",description:"align-items: center."},{name:".pz-flex--vertical-end",description:"align-items: flex-end."},{name:".pz-flex--vertical-stretch",description:"align-items: stretch."},{name:".pz-flex--vertical-baseline",description:"align-items: baseline."}]},{title:"Horizontal alignment modifiers",note:"justify-content",items:[{name:".pz-flex--horizontal-start",description:"justify-content: flex-start."},{name:".pz-flex--horizontal-center",description:"justify-content: center."},{name:".pz-flex--horizontal-end",description:"justify-content: flex-end."},{name:".pz-flex--horizontal-between",description:"justify-content: space-between."},{name:".pz-flex--horizontal-around",description:"justify-content: space-around."},{name:".pz-flex--horizontal-evenly",description:"justify-content: space-evenly."}]},{title:"Direction, wrap, and text alignment",note:"flow",items:[{name:".pz-flex--row / .pz-flex--column",description:"flex-direction: row / column."},{name:".pz-flex--wrap / .pz-flex--nowrap",description:"flex-wrap: wrap / nowrap."},{name:".pz-text-left / .pz-text-center / .pz-text-right",description:"text-align: left / center / right."}]}],s=[{name:"sm",pattern:".pz-flex-sm / .pz-flex-sm--{modifier}",minWidth:"≥ 576px",description:"Small viewports and up."},{name:"md",pattern:".pz-flex-md / .pz-flex-md--{modifier}",minWidth:"≥ 768px",description:"Tablet breakpoint and up."},{name:"lg",pattern:".pz-flex-lg / .pz-flex-lg--{modifier}",minWidth:"≥ 1024px",description:"Large viewports and up."},{name:"xl",pattern:".pz-flex-xl / .pz-flex-xl--{modifier}",minWidth:"≥ 1200px",description:"Desktop breakpoint and up."},{name:"xxl",pattern:".pz-flex-xxl / .pz-flex-xxl--{modifier}",minWidth:"≥ 1400px",description:"Wide displays and up."}],c={title:"Foundation/Display",parameters:{prototype:{caption:"Display utilities",note:"Display, flex alignment, and text alignment helpers with responsive breakpoint variants."},docs:{description:{component:"Display foundation for `@prozorro/prozorro-ui`. The utility module emits `pz-block`, `pz-flex`, and `pz-text-*` classes plus BEM-style flex modifiers (`pz-flex--vertical-*`, `pz-flex--horizontal-*`) that adapt layouts per breakpoint via suffixed variants such as `pz-flex-lg--horizontal-between`."}}},render:()=>({components:{pzText:l},setup(){return{utilityGroups:n,displayBreakpoints:s}},template:`
      <div class="display-foundation">
        <section class="display-foundation-board">
          <header class="display-foundation-hero">
            <div class="display-foundation-hero-copy">
              <span class="display-foundation-kicker">Display module</span>
              <pz-text variant="h2-bold">Display and flex alignment utilities with responsive variants</pz-text>
              <pz-text variant="body-regular">
                Switch display modes and flex alignment straight from markup. Modifiers follow a mobile-first model: base classes apply everywhere, breakpoint-suffixed classes override from that width up.
              </pz-text>
            </div>

            <div class="display-foundation-hero-note">
              <pz-text variant="small-bold">Implementation note</pz-text>
              <pz-text variant="small-regular">
                Flex modifiers only set the alignment property — pair them with pz-flex (or a responsive display class) on the same element. The breakpoint goes on the block name: pz-flex-lg--vertical-start.
              </pz-text>
            </div>
          </header>

          <section class="display-foundation-section">
            <div class="display-foundation-section-heading">
              <pz-text variant="h4-bold">Utility groups</pz-text>
              <pz-text variant="small-regular">Public classes emitted by the SCSS module.</pz-text>
            </div>

            <div class="display-foundation-groups">
              <article
                v-for="group in utilityGroups"
                :key="group.title"
                class="display-foundation-group-card"
              >
                <div class="display-foundation-group-head">
                  <span class="display-foundation-chip">{{ group.note }}</span>
                  <pz-text variant="h4-semibold">{{ group.title }}</pz-text>
                </div>

                <div class="display-foundation-table">
                  <div class="display-foundation-head">Utility</div>
                  <div class="display-foundation-head">Description</div>

                  <template v-for="item in group.items" :key="group.title + item.name">
                    <div class="display-foundation-cell display-foundation-cell-code"><code>{{ item.name }}</code></div>
                    <div class="display-foundation-cell"><pz-text variant="body-regular">{{ item.description }}</pz-text></div>
                  </template>
                </div>
              </article>
            </div>
          </section>

          <section class="display-foundation-section">
            <div class="display-foundation-section-heading">
              <pz-text variant="h4-bold">Responsive utilities</pz-text>
              <pz-text variant="small-regular">
                Breakpoint-suffixed overrides follow the same mobile-first model as the grid and spacing modules. The suffix attaches to the block name, before any modifier.
              </pz-text>
            </div>

            <pre class="display-foundation-code"><code>&lt;!-- block element with centered text --&gt;
&lt;div class="pz-block pz-text-center"&gt;...&lt;/div&gt;

&lt;!-- flex row: centered/start on mobile, start/space-between from lg (1024px) up --&gt;
&lt;div class="pz-flex pz-flex--vertical-center pz-flex--horizontal-start pz-flex-lg--vertical-start pz-flex-lg--horizontal-between"&gt;...&lt;/div&gt;

&lt;!-- hidden on mobile, flex column from md (768px) up --&gt;
&lt;div class="pz-none pz-flex-md pz-flex-md--column"&gt;...&lt;/div&gt;</code></pre>

            <div class="display-foundation-bp-table">
              <div class="display-foundation-head">Suffix pattern</div>
              <div class="display-foundation-head">Min-width</div>
              <div class="display-foundation-head">Description</div>

              <template v-for="bp in displayBreakpoints" :key="bp.name">
                <div class="display-foundation-cell display-foundation-cell-code"><code>{{ bp.pattern }}</code></div>
                <div class="display-foundation-cell"><pz-text variant="small-bold">{{ bp.minWidth }}</pz-text></div>
                <div class="display-foundation-cell"><pz-text variant="body-regular">{{ bp.description }}</pz-text></div>
              </template>
            </div>
          </section>

          <section class="display-foundation-section">
            <div class="display-foundation-section-heading">
              <pz-text variant="h4-bold">Live preview</pz-text>
              <pz-text variant="small-regular">
                Examples using the emitted utility classes directly. Resize the viewport across 1024px to see the lg overrides flip the responsive demos.
              </pz-text>
            </div>

            <div class="display-foundation-preview">
              <article class="display-foundation-preview-card">
                <span class="display-foundation-chip">Block + text-align</span>
                <div class="display-foundation-preview-surface pz-block pz-text-center">
                  <div class="display-foundation-preview-box">
                    <pz-text variant="body-semibold">pz-block pz-text-center</pz-text>
                    <pz-text variant="small-regular">Block container with centered text.</pz-text>
                  </div>
                </div>
              </article>

              <article class="display-foundation-preview-card">
                <span class="display-foundation-chip">Flex alignment</span>
                <div class="display-foundation-preview-surface pz-flex pz-flex--vertical-center pz-flex--horizontal-between">
                  <div class="display-foundation-preview-box">
                    <pz-text variant="small-regular">vertical-center</pz-text>
                  </div>
                  <div class="display-foundation-preview-box display-foundation-preview-box-tall">
                    <pz-text variant="small-regular">horizontal-between</pz-text>
                  </div>
                </div>
              </article>

              <article class="display-foundation-preview-card">
                <span class="display-foundation-chip">Responsive alignment</span>
                <div class="display-foundation-preview-surface pz-flex pz-flex--vertical-center pz-flex--horizontal-start pz-flex-lg--vertical-start pz-flex-lg--horizontal-between">
                  <div class="display-foundation-preview-box">
                    <pz-text variant="small-regular">center / start on mobile</pz-text>
                  </div>
                  <div class="display-foundation-preview-box display-foundation-preview-box-tall">
                    <pz-text variant="small-regular">start / between from lg up</pz-text>
                  </div>
                </div>
              </article>

              <article class="display-foundation-preview-card">
                <span class="display-foundation-chip">Responsive visibility</span>
                <div class="display-foundation-preview-surface pz-flex pz-flex--column pz-flex-lg--row pz-flex--horizontal-start">
                  <div class="display-foundation-preview-box">
                    <pz-text variant="small-regular">column on mobile, row from lg up</pz-text>
                  </div>
                  <div class="display-foundation-preview-box pz-none-lg">
                    <pz-text variant="small-regular">pz-none-lg — hidden from lg up</pz-text>
                  </div>
                </div>
              </article>
            </div>
          </section>
        </section>
      </div>
    `})},e={name:"Reference"};var t,i,a;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`{
  name: "Reference"
}`,...(a=(i=e.parameters)==null?void 0:i.docs)==null?void 0:a.source}}};const f=["Reference"];export{e as Reference,f as __namedExportsOrder,c as default};
