import{x as c,i as g}from"./iframe-CMPv_g6-.js";import{t as m}from"./custom-element-UsVr97OX.js";import{C as u}from"./ComponentStatesMixin-sjcdg7YH.js";import"./preload-helper-PPVm8Dsz.js";var r=Object.freeze,b=Object.defineProperty,h=Object.getOwnPropertyDescriptor,x=(e,o,p,d)=>{for(var t=d>1?void 0:d?h(o,p):o,s=e.length-1,n;s>=0;s--)(n=e[s])&&(t=n(t)||t);return t},f=(e,o)=>r(b(e,"raw",{value:r(e.slice())})),l;const C={title:"Mixins/Component States",tags:["autodocs"],parameters:{docs:{description:{component:`
\`ComponentStatesMixin\` provides access to the **Custom State API** for managing component-specific states that can be styled with the \`:state()\` pseudo-class in CSS.

Uses \`ElementInternals.states\` (\`CustomStateSet\`) to manage component states that are separate from attributes, providing better encapsulation and performance.

<h3>What ComponentStatesMixin Provides</h3>
<ul>
    <li><strong>internals:</strong> <code>ElementInternals</code> instance for accessing internal element APIs</li>
    <li><strong>states:</strong> <code>CustomStateSet</code> for managing component states (add, delete, has, clear)</li>
    <li>Access to browser-native Custom State API</li>
    <li>States can be styled externally using CSS <code>:state()</code> pseudo-class</li>
</ul>

<h3>Default Component States</h3>

<p>The following states are available across all Brightspot UI components:</p>

<table>
  <thead>
    <tr>
      <th>State Name</th>
      <th>Description</th>
      <th>Usage</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>btu-error</code></td>
      <td>Indicates an error state</td>
      <td>Form validation errors, failed operations</td>
    </tr>
    <tr>
      <td><code>btu-loading</code></td>
      <td>Indicates a loading/pending state</td>
      <td>Async operations in progress</td>
    </tr>
    <tr>
      <td><code>btu-expanded</code></td>
      <td>Indicates an expanded state</td>
      <td>Collapsible/expandable components</td>
    </tr>
    <tr>
      <td><code>btu-clipboard-copied</code></td>
      <td>Indicates successful clipboard copy</td>
      <td>Copy-to-clipboard operations</td>
    </tr>
  </tbody>
</table>

<h3>TypeScript Usage</h3>

\`\`\`typescript
import { ComponentStatesMixin } from './ComponentStatesMixin'
import { LitElement } from 'lit'

// Basic usage
class MyComponent extends ComponentStatesMixin(LitElement) {
  async fetchData() {
    // Add loading state
    this.states.add('btu-loading')
    this.requestUpdate()

    try {
      const data = await fetch('/api/data')
      this.states.delete('btu-loading')
      this.requestUpdate()
    } catch (error) {
      this.states.delete('btu-loading')
      this.states.add('btu-error')
      this.requestUpdate()
    }
  }

  checkState() {
    if (this.states.has('btu-loading')) {
      console.log('Component is loading...')
    }
  }
}
\`\`\`

<h3>CSS Styling with :state()</h3>

<p>Style components based on their current state using the \`:state()\` pseudo-class:</p>

\`\`\`css
/* Style component when in loading state */
my-component:state(btu-loading) {
  opacity: 0.5;
  pointer-events: none;
  cursor: wait;
}

/* Style component when in error state */
my-component:state(btu-error) {
  border-color: red;
  background-color: #fee;
}

/* Style component when expanded */
my-component:state(btu-expanded) {
  height: auto;
  max-height: 500px;
}
\`\`\`

<h3>Learn More</h3>
<ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states" target="_blank">MDN: ElementInternals.states</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:state" target="_blank">MDN: :state() pseudo-class</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet" target="_blank">MDN: CustomStateSet</a></li>
</ul>
        `}}}};let i=class extends u(g){render(){return c`
      <div style="border-radius: 4px; border: 2px solid #d1d5db; padding: 1rem; transition: all 0.2s;">
        <p style="font-size: 0.875rem; color: #4b5563;">Current states will affect styling of this text box</p>
      </div>
    `}};i=x([m("state-demo")],i);const a={render:()=>c(l||(l=f([`<div class="flex flex-col gap-4">
      <div>
        <h4 class="mb-2 font-bold">Interactive Component States Demo</h4>
        <p class="mb-4 text-sm text-gray-600">
          Click the checkboxes to toggle states and observe the visual changes. Open your browser console to see state
          change logs.
        </p>
      </div>

      <state-demo id="state-demo"></state-demo>

      <div class="flex flex-wrap gap-4">
        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
          <input type="checkbox" id="toggle-error" />
          <span>Error State</span>
        </label>
        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
          <input type="checkbox" id="toggle-loading" />
          <span>Loading State</span>
        </label>
        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
          <input type="checkbox" id="toggle-expanded" />
          <span>Expanded State</span>
        </label>
        <button id="clear-states" class="btu-button btu-button-gray btu-button-md">Clear All States</button>
      </div>

      <style>
        state-demo:state(btu-error) {
          border-color: #ef4444 !important;
          background-color: #fee2e2 !important;
        }

        state-demo:state(btu-loading) {
          opacity: 0.6;
          cursor: wait;
        }

        state-demo:state(btu-expanded) {
          padding: 2rem !important;
          background-color: #dbeafe !important;
        }
      </style>

      <script>
        ;(() => {
          const demo = document.getElementById('state-demo')
          if (!demo) return

          const toggleError = document.getElementById('toggle-error')
          const toggleLoading = document.getElementById('toggle-loading')
          const toggleExpanded = document.getElementById('toggle-expanded')
          const clearStates = document.getElementById('clear-states')

          toggleError?.addEventListener('change', e => {
            if (e.target.checked) {
              demo.states.add('btu-error')
              console.log('✅ Added btu-error state')
            } else {
              demo.states.delete('btu-error')
              console.log('❌ Removed btu-error state')
            }
            demo.requestUpdate()
          })

          toggleLoading?.addEventListener('change', e => {
            if (e.target.checked) {
              demo.states.add('btu-loading')
              console.log('⏳ Added btu-loading state')
            } else {
              demo.states.delete('btu-loading')
              console.log('❌ Removed btu-loading state')
            }
            demo.requestUpdate()
          })

          toggleExpanded?.addEventListener('change', e => {
            if (e.target.checked) {
              demo.states.add('btu-expanded')
              console.log('📖 Added btu-expanded state')
            } else {
              demo.states.delete('btu-expanded')
              console.log('❌ Removed btu-expanded state')
            }
            demo.requestUpdate()
          })

          clearStates?.addEventListener('click', () => {
            demo.states.clear()
            toggleError.checked = false
            toggleLoading.checked = false
            toggleExpanded.checked = false
            console.log('🧹 Cleared all states')
            demo.requestUpdate()
          })
        })()
      <\/script>
    </div>`])))};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
  render: () => html\`<div class="flex flex-col gap-4">
      <div>
        <h4 class="mb-2 font-bold">Interactive Component States Demo</h4>
        <p class="mb-4 text-sm text-gray-600">
          Click the checkboxes to toggle states and observe the visual changes. Open your browser console to see state
          change logs.
        </p>
      </div>

      <state-demo id="state-demo"></state-demo>

      <div class="flex flex-wrap gap-4">
        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
          <input type="checkbox" id="toggle-error" />
          <span>Error State</span>
        </label>
        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
          <input type="checkbox" id="toggle-loading" />
          <span>Loading State</span>
        </label>
        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
          <input type="checkbox" id="toggle-expanded" />
          <span>Expanded State</span>
        </label>
        <button id="clear-states" class="btu-button btu-button-gray btu-button-md">Clear All States</button>
      </div>

      <style>
        state-demo:state(btu-error) {
          border-color: #ef4444 !important;
          background-color: #fee2e2 !important;
        }

        state-demo:state(btu-loading) {
          opacity: 0.6;
          cursor: wait;
        }

        state-demo:state(btu-expanded) {
          padding: 2rem !important;
          background-color: #dbeafe !important;
        }
      </style>

      <script>
        ;(() => {
          const demo = document.getElementById('state-demo')
          if (!demo) return

          const toggleError = document.getElementById('toggle-error')
          const toggleLoading = document.getElementById('toggle-loading')
          const toggleExpanded = document.getElementById('toggle-expanded')
          const clearStates = document.getElementById('clear-states')

          toggleError?.addEventListener('change', e => {
            if (e.target.checked) {
              demo.states.add('btu-error')
              console.log('✅ Added btu-error state')
            } else {
              demo.states.delete('btu-error')
              console.log('❌ Removed btu-error state')
            }
            demo.requestUpdate()
          })

          toggleLoading?.addEventListener('change', e => {
            if (e.target.checked) {
              demo.states.add('btu-loading')
              console.log('⏳ Added btu-loading state')
            } else {
              demo.states.delete('btu-loading')
              console.log('❌ Removed btu-loading state')
            }
            demo.requestUpdate()
          })

          toggleExpanded?.addEventListener('change', e => {
            if (e.target.checked) {
              demo.states.add('btu-expanded')
              console.log('📖 Added btu-expanded state')
            } else {
              demo.states.delete('btu-expanded')
              console.log('❌ Removed btu-expanded state')
            }
            demo.requestUpdate()
          })

          clearStates?.addEventListener('click', () => {
            demo.states.clear()
            toggleError.checked = false
            toggleLoading.checked = false
            toggleExpanded.checked = false
            console.log('🧹 Cleared all states')
            demo.requestUpdate()
          })
        })()
      <\/script>
    </div>\`
}`,...a.parameters?.docs?.source}}};const k=["ComponentStates"];export{a as ComponentStates,k as __namedExportsOrder,C as default};
