import{g as p,x as l}from"./iframe-CMPv_g6-.js";import{o as a}from"./if-defined-DzbkssR9.js";import{o as c}from"./style-map-968Ye5qo.js";import"./preload-helper-PPVm8Dsz.js";const{events:d,args:u,argTypes:t}=p("btu-popover"),h={title:"Components/Popover",component:"btu-popover",tags:["autodocs"],parameters:{docs:{subtitle:"Rich interactive content anchored to a trigger element",description:{component:`
\`btu-popover\` displays rich interactive content anchored to a trigger element using CSS anchor positioning and the native Popover API.

<h3>When to use:</h3>
<ul>
  <li>Confirmation dialogs anchored to a button</li>
  <li>Rich preview cards on hover</li>
  <li>Interactive forms or menus in a floating panel</li>
</ul>

<h3>When not to use:</h3>
<ul>
  <li>For simple text-only hints — use <a href="?path=/docs/components-tooltip--docs">Tooltip</a> instead</li>
  <li>For status messages or inline feedback (use alerts or toasts)</li>
</ul>

<h3>Accessibility</h3>
<ul>
  <li><code>role="dialog"</code> on popover panel</li>
  <li><code>aria-expanded</code> on trigger element</li>
  <li><code>aria-controls</code> links trigger to panel</li>
  <li>Escape key dismisses the popover</li>
  <li>Click outside dismisses (click trigger only)</li>
  <li>Focus restored to trigger on close</li>
  <li>Add <code>autofocus</code> to an element inside <code>slot="content"</code> for auto-focus on open</li>
</ul>
        `}},actions:{handles:d},controls:{expanded:!0}},args:{...u,position:"bottom",trigger:"click",delay:300,open:!1},argTypes:{...t,position:{...t.position,control:{type:"select"},options:["top","bottom","left","right"]},trigger:{...t.trigger,control:{type:"select"},options:["click","hover","focus"]},delay:{...t.delay,control:{type:"number"},description:"Show delay in ms (hover trigger only)"},offset:{...t.offset,control:{type:"select"},options:["sm","md","lg","xl"],description:"Gap between trigger and popover (sm=4px, md=8px, lg=12px, xl=16px)"},open:{...t.open,control:{type:"boolean"},description:"Programmatic open/close (reflected)"},customBg:{name:"--popover-color-background",description:"Background color",control:{type:"color"},table:{category:"css properties",defaultValue:{summary:"white"}}},customTitleColor:{name:"--popover-color-title",description:"Title text color",control:{type:"color"},table:{category:"css properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},customContentColor:{name:"--popover-color-content",description:"Content text color",control:{type:"color"},table:{category:"css properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},customRadius:{name:"--popover-border-radius",description:"Border radius",control:{type:"select"},options:["0px","0.125rem","0.25rem","0.375rem","0.5rem","0.75rem","1rem","1.5rem","9999px"],labels:{"0px":"none (0px)","0.125rem":"sm (0.125rem)","0.25rem":"DEFAULT (0.25rem)","0.375rem":"md (0.375rem)","0.5rem":"lg (0.5rem)","0.75rem":"xl (0.75rem)","1rem":"2xl (1rem)","1.5rem":"3xl (1.5rem)","9999px":"full (9999px)"},table:{category:"css properties",defaultValue:{summary:"0.5rem (lg)"}}}},render:o=>{const e={};return o.customBg&&(e["--popover-color-background"]=o.customBg),o.customTitleColor&&(e["--popover-color-title"]=o.customTitleColor),o.customContentColor&&(e["--popover-color-content"]=o.customContentColor),o.customRadius&&(e["--popover-border-radius"]=o.customRadius),l`
      <div style="display: flex; justify-content: center; padding: 6rem 2rem;">
        <div style=${c(e)}>
          <btu-popover
            position="${o.position}"
            trigger="${o.trigger}"
            delay="${o.delay}"
            offset="${a(o.offset)}"
            ?no-arrow="${o.noArrow}"
            ?open="${o.open}"
          >
            <button class="btu-button btu-button-gray btu-button-sm" slot="trigger">
              ${o.trigger==="hover"?"Hover me":o.trigger==="focus"?"Focus me":"Click me"}
            </button>
            <div slot="content">
              <div style="font-weight: 500; margin-bottom: 4px; color: var(--popover-color-title);">Popover Title</div>
              <div style="color: var(--popover-color-content, oklch(var(--btu-theme-gray-900)));">
                This is a popover with rich content.
                ${o.trigger==="click"?"Click outside or press Escape to dismiss.":""}
              </div>
            </div>
          </btu-popover>
        </div>
      </div>
    `}},n={args:{noArrow:!1,offset:void 0}},r={render:()=>l`
    <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
      <btu-popover position="top">
        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Top</button>
        <div slot="content">Popover positioned above the trigger</div>
      </btu-popover>
      <btu-popover position="bottom">
        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Bottom</button>
        <div slot="content">Popover positioned below the trigger</div>
      </btu-popover>
      <btu-popover position="left">
        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Left</button>
        <div slot="content">Popover positioned left of the trigger</div>
      </btu-popover>
      <btu-popover position="right">
        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Right</button>
        <div slot="content">Popover positioned right of the trigger</div>
      </btu-popover>
    </div>
  `,parameters:{docs:{description:{story:"Popovers support four positions: `top`, `bottom`, `left`, and `right`. Each auto-flips if constrained by the viewport."}}}},i={render:()=>l`
    <style>
      .popover-custom-content {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 240px;
      }
      .popover-custom-content h3 {
        margin: 0;
        font-size: 0.9375rem;
        font-weight: 600;
      }
      .popover-custom-content p {
        margin: 0;
        font-size: 0.8125rem;
        color: oklch(var(--btu-theme-gray-500));
        line-height: 1.4;
      }
      .popover-custom-content .actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        padding-top: 4px;
        border-top: 1px solid oklch(var(--btu-theme-gray-100));
      }
      .legend-series {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .legend-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.75rem;
        line-height: 1.125rem;
        color: oklch(var(--btu-theme-gray-500));
      }
      .legend-dot {
        width: 8px;
        height: 8px;
        border-radius: 9999px;
        flex-shrink: 0;
      }
      .legend-value {
        font-weight: 600;
      }
    </style>
    <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
      <btu-popover position="bottom">
        <button class="btu-button btu-button-error" slot="trigger">Delete item</button>
        <div slot="content">
          <div class="popover-custom-content">
            <h3>Confirm Delete</h3>
            <p>Are you sure you want to delete this item? This action cannot be undone.</p>
            <div class="actions">
              <button class="btu-button btu-button-warning btu-button-xs">Cancel</button>
              <button class="btu-button btu-button-fill-none btu-button-error btu-button-xs">Delete</button>
            </div>
          </div>
        </div>
      </btu-popover>
      <btu-popover trigger="hover" delay="200" position="bottom">
        <button class="btu-button btu-button-primary" slot="trigger">Hover for chart data</button>
        <div slot="content">
          <div
            style="font-weight: 500; font-size: 0.75rem; line-height: 1.125rem; color: oklch(var(--btu-theme-gray-900)); margin-bottom: 8px;"
          >
            Chart Legend
          </div>
          <div class="legend-series">
            <div class="legend-item">
              <span class="legend-dot" style="background: oklch(var(--btu-theme-primary-900));"></span>
              Series 1: <span class="legend-value">786</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot" style="background: oklch(var(--btu-theme-primary-700));"></span>
              Series 2: <span class="legend-value">786</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot" style="background: oklch(var(--btu-theme-primary-500));"></span>
              Series 3: <span class="legend-value">786</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot" style="background: oklch(var(--btu-theme-teal-700));"></span>
              Series 4: <span class="legend-value">786</span>
            </div>
          </div>
        </div>
      </btu-popover>
    </div>
  `,parameters:{docs:{description:{story:"Two examples of rich popover content: a confirmation dialog with action buttons (click trigger), and a chart legend with colored series data (hover trigger)."}}}},s={render:()=>l`
    <style>
      .custom-popover-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        background-color: oklch(0.35 0.1 280);
        color: white;
        font-weight: 500;
        font-size: 0.875rem;
        cursor: pointer;
        user-select: none;
        border: 1px solid oklch(0.45 0.1 280);
      }
      .custom-popover-trigger:hover {
        background-color: oklch(0.4 0.1 280);
      }
    </style>
    <div style="display: flex; justify-content: center; padding: 6rem 2rem;">
      <div
        style="--popover-color-background: oklch(0.25 20.05 280); --popover-color-title: oklch(0.95 0 0); --popover-color-content: oklch(0.8 120 50); --popover-border-radius: 0px;"
      >
        <btu-popover position="bottom" offset="lg" no-arrow>
          <button class="custom-popover-trigger" slot="trigger">Fully customized</button>
          <div slot="content">
            <div style="font-weight: 600; font-size: 1rem; margin-bottom: 8px; color: var(--popover-color-title);">
              Custom Styled Popover
            </div>
            <div style="line-height: 1.5; color: var(--popover-color-content);">
              This popover overrides all available CSS custom properties: background, title color, and border radius. It
              also uses
              <code style="background: oklch(0.35 0.05 280); padding: 2px 6px; border-radius: 4px;">offset="lg"</code>
              for extra spacing and
              <code style="background: oklch(0.35 0.05 280); padding: 2px 6px; border-radius: 4px;">no-arrow</code> for
              a clean look.
            </div>
          </div>
        </btu-popover>
      </div>
    </div>
  `,parameters:{docs:{description:{story:"Demonstrates full customization of all CSS custom properties. Set these on a parent element or directly on the component:\n\n- `--popover-color-background` — Background color\n- `--popover-color-title` — Title text color\n- `--popover-color-content` — Content text color\n- `--popover-border-radius` — Border radius"}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
  args: {
    noArrow: false,
    offset: undefined
  }
}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
      <btu-popover position="top">
        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Top</button>
        <div slot="content">Popover positioned above the trigger</div>
      </btu-popover>
      <btu-popover position="bottom">
        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Bottom</button>
        <div slot="content">Popover positioned below the trigger</div>
      </btu-popover>
      <btu-popover position="left">
        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Left</button>
        <div slot="content">Popover positioned left of the trigger</div>
      </btu-popover>
      <btu-popover position="right">
        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Right</button>
        <div slot="content">Popover positioned right of the trigger</div>
      </btu-popover>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Popovers support four positions: \`top\`, \`bottom\`, \`left\`, and \`right\`. Each auto-flips if constrained by the viewport.'
      }
    }
  }
}`,...r.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <style>
      .popover-custom-content {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 240px;
      }
      .popover-custom-content h3 {
        margin: 0;
        font-size: 0.9375rem;
        font-weight: 600;
      }
      .popover-custom-content p {
        margin: 0;
        font-size: 0.8125rem;
        color: oklch(var(--btu-theme-gray-500));
        line-height: 1.4;
      }
      .popover-custom-content .actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        padding-top: 4px;
        border-top: 1px solid oklch(var(--btu-theme-gray-100));
      }
      .legend-series {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .legend-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.75rem;
        line-height: 1.125rem;
        color: oklch(var(--btu-theme-gray-500));
      }
      .legend-dot {
        width: 8px;
        height: 8px;
        border-radius: 9999px;
        flex-shrink: 0;
      }
      .legend-value {
        font-weight: 600;
      }
    </style>
    <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
      <btu-popover position="bottom">
        <button class="btu-button btu-button-error" slot="trigger">Delete item</button>
        <div slot="content">
          <div class="popover-custom-content">
            <h3>Confirm Delete</h3>
            <p>Are you sure you want to delete this item? This action cannot be undone.</p>
            <div class="actions">
              <button class="btu-button btu-button-warning btu-button-xs">Cancel</button>
              <button class="btu-button btu-button-fill-none btu-button-error btu-button-xs">Delete</button>
            </div>
          </div>
        </div>
      </btu-popover>
      <btu-popover trigger="hover" delay="200" position="bottom">
        <button class="btu-button btu-button-primary" slot="trigger">Hover for chart data</button>
        <div slot="content">
          <div
            style="font-weight: 500; font-size: 0.75rem; line-height: 1.125rem; color: oklch(var(--btu-theme-gray-900)); margin-bottom: 8px;"
          >
            Chart Legend
          </div>
          <div class="legend-series">
            <div class="legend-item">
              <span class="legend-dot" style="background: oklch(var(--btu-theme-primary-900));"></span>
              Series 1: <span class="legend-value">786</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot" style="background: oklch(var(--btu-theme-primary-700));"></span>
              Series 2: <span class="legend-value">786</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot" style="background: oklch(var(--btu-theme-primary-500));"></span>
              Series 3: <span class="legend-value">786</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot" style="background: oklch(var(--btu-theme-teal-700));"></span>
              Series 4: <span class="legend-value">786</span>
            </div>
          </div>
        </div>
      </btu-popover>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Two examples of rich popover content: a confirmation dialog with action buttons (click trigger), and a chart legend with colored series data (hover trigger).'
      }
    }
  }
}`,...i.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <style>
      .custom-popover-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        background-color: oklch(0.35 0.1 280);
        color: white;
        font-weight: 500;
        font-size: 0.875rem;
        cursor: pointer;
        user-select: none;
        border: 1px solid oklch(0.45 0.1 280);
      }
      .custom-popover-trigger:hover {
        background-color: oklch(0.4 0.1 280);
      }
    </style>
    <div style="display: flex; justify-content: center; padding: 6rem 2rem;">
      <div
        style="--popover-color-background: oklch(0.25 20.05 280); --popover-color-title: oklch(0.95 0 0); --popover-color-content: oklch(0.8 120 50); --popover-border-radius: 0px;"
      >
        <btu-popover position="bottom" offset="lg" no-arrow>
          <button class="custom-popover-trigger" slot="trigger">Fully customized</button>
          <div slot="content">
            <div style="font-weight: 600; font-size: 1rem; margin-bottom: 8px; color: var(--popover-color-title);">
              Custom Styled Popover
            </div>
            <div style="line-height: 1.5; color: var(--popover-color-content);">
              This popover overrides all available CSS custom properties: background, title color, and border radius. It
              also uses
              <code style="background: oklch(0.35 0.05 280); padding: 2px 6px; border-radius: 4px;">offset="lg"</code>
              for extra spacing and
              <code style="background: oklch(0.35 0.05 280); padding: 2px 6px; border-radius: 4px;">no-arrow</code> for
              a clean look.
            </div>
          </div>
        </btu-popover>
      </div>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: \`Demonstrates full customization of all CSS custom properties. Set these on a parent element or directly on the component:

- \\\`--popover-color-background\\\` — Background color
- \\\`--popover-color-title\\\` — Title text color
- \\\`--popover-color-content\\\` — Content text color
- \\\`--popover-border-radius\\\` — Border radius\`
      }
    }
  }
}`,...s.parameters?.docs?.source}}};const f=["Default","Positions","RichContent","AdvancedUsage"];export{s as AdvancedUsage,n as Default,r as Positions,i as RichContent,f as __namedExportsOrder,h as default};
