ExButton

<!-- ════════════════════════════════════════════ -->
<!--  01 · FOUNDATION                              -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent" class="sapUiTinyMarginTop">
  <Title text="01 · Foundation" level="H3" />
</Toolbar>
<FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" class="sapUiSmallMarginBottom" gap="1rem">
  <ux7:ExButton id="btnPrimary" type="primary" height="3rem"  text="Primary" press="onPress" />
  <ux7:ExButton id="btnSecondary" type="secondary" text="Secondary" press="onPress" />
  <ux7:ExButton id="btnTertiary" type="tertiary" text="Tertiary" press="onPress" />
  <ux7:ExButton id="btnGhost" type="ghost" text="Ghost" press="onPress" />
  <ux7:ExButton id="btnTextBtn" type="text-btn" text="Text button" press="onPress" />
  <ux7:ExButton id="btnPill" type="pill" text="Pill" press="onPress" />
  <ux7:ExButton id="btnDanger" type="danger" text="Danger" press="onPress" />
  <ux7:ExButton id="btnSuccess" type="success" text="Success" press="onPress" />
  <ux7:ExButton id="btnError"   type="error" text="Error" press="onPress" />
</FlexBox>


<!-- ════════════════════════════════════════════ -->
<!--  02 · SOFT (tonal multi-color)                -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="02 · Soft — multi-color tonal" level="H3" />
</Toolbar>
<FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" class="sapUiSmallMarginBottom" gap="1rem">
  <ux7:ExButton type="soft" icon="sap-icon://filter" size="xxl" text="Filter" press="onPress" />
  <ux7:ExButton type="soft-purple" icon="sap-icon://ai" text="AI assist" press="onPress" />
  <ux7:ExButton type="soft-teal" icon="sap-icon://download" text="Export CSV" press="onPress" />
  <ux7:ExButton type="soft-orange" icon="sap-icon://bell" text="Subscribe" press="onPress" />
  <ux7:ExButton type="soft-magenta" icon="sap-icon://favorite" text="Mark important" press="onPress" />
  <ux7:ExButton type="soft-success" icon="sap-icon://accept" text="Approved" press="onPress" />
  <ux7:ExButton type="soft-warning" icon="sap-icon://alert" text="Pending review" press="onPress" />
  <ux7:ExButton type="soft-danger" icon="sap-icon://delete" text="Archive" press="onPress" />
</FlexBox>


<!-- ════════════════════════════════════════════ -->
<!--  03 · DEPTH (elevated · tactile · neumorphic) -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="03 · Depth — elevated · tactile · neumorphic" level="H3" />
</Toolbar>
<FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" class="sapUiSmallMarginBottom" gap="1rem">
  <ux7:ExButton type="elev" icon="sap-icon://connected" text="Connect SAP system" press="onPress" />
  <ux7:ExButton type="elev" icon="sap-icon://upload" text="Upload" press="onPress" />
  <ux7:ExButton type="elev" size="l" text="Run diagnostics" press="onPress" />

  <ux7:ExButton type="tactile" size="l" text="Submit order" press="onPress" />
  <ux7:ExButton type="tactile-charcoal" size="l" icon="sap-icon://play" text="Run job" press="onPress" />

  <ux7:ExButton type="neu" size="l" text="Save draft" press="onPress" />
  <ux7:ExButton type="neu-accent" size="l" icon="sap-icon://ai" text="Generate" press="onPress" />
  <ux7:ExButton type="neu" size="l" iconOnly="true" icon="sap-icon://action-settings" text="Settings" press="onPress" />
</FlexBox>


<!-- ════════════════════════════════════════════ -->
<!--  04 · GLASS (frosted overlays)                -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="04 · Glass — frosted overlays" level="H3" />
</Toolbar>

<!-- Glass-light & Glass-tinted için renkli arkaplan -->
<ux7:ExPanel class="ex-test-panel-photo sapUiSmallMarginBottom" expanded="true">
  <FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" gap="1rem">
    <ux7:ExButton type="glass" size="l" icon="sap-icon://play" text="Watch demo" press="onPress" />
    <ux7:ExButton type="glass" size="l" text="Get started" press="onPress" />
    <ux7:ExButton type="glass-tinted" size="l" icon="sap-icon://ai" text="Try AI mode" press="onPress" />
  </FlexBox>
</ux7:ExPanel>

<!-- Glass-dark için koyu arkaplan -->
<Panel class="ex-test-panel-dark sapUiSmallMarginBottom" backgroundDesign="Transparent">
  <FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" gap="1rem">
    <ux7:ExButton type="glass-dark" size="l" icon="sap-icon://download" text="Download report" press="onPress" />
    <ux7:ExButton type="glass-dark" size="l" text="Continue" press="onPress" />
    <ux7:ExButton type="glass-dark" size="l" iconOnly="true" icon="sap-icon://action-settings" text="Settings" press="onPress" />
  </FlexBox>
</Panel>


<!-- ════════════════════════════════════════════ -->
<!--  05 · GRADIENT (vibrant)                      -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="05 · Gradient — vibrant accents" level="H3" />
</Toolbar>
<FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" class="sapUiSmallMarginBottom" gap="1rem">
  <ux7:ExButton type="gradient" size="l" text="Default gradient" press="onPress" />
  <ux7:ExButton type="grad-fiori" size="l" icon="sap-icon://ai" text="Activate license" press="onPress" />
  <ux7:ExButton type="grad-aurora" size="l" text="Explore plans" press="onPress" />
  <ux7:ExButton type="grad-sunset" size="l" text="Upgrade" press="onPress" />
  <ux7:ExButton type="grad-mint" size="l" text="Connect" press="onPress" />
  <ux7:ExButton type="grad-ring" size="l" icon="sap-icon://ai" text="AI generate" press="onPress" />
</FlexBox>


<!-- ════════════════════════════════════════════ -->
<!--  06 · INTERACTIVE (sweep · spot · morph)      -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="06 · Interactive — micro-interactions" level="H3" />
</Toolbar>
<FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" class="sapUiSmallMarginBottom" gap="1rem">
  <ux7:ExButton type="sweep" size="l" text="Request a demo" press="onPress" />
  <ux7:ExButton type="sweep" size="l" icon="sap-icon://pdf-attachment" text="Download PDF" press="onPress" />

  <ux7:ExButton type="spot" size="l" text="Hover &amp; drag across" press="onPress" />
  <ux7:ExButton type="spot" size="l" icon="sap-icon://ai" text="Magic action" press="onPress" />

  <ux7:ExButton type="morph" size="l" text="Schedule meeting" press="onPress" />
  <ux7:ExButton type="morph-up" size="l" text="Subscribe now" press="onPress" />
</FlexBox>


<!-- ════════════════════════════════════════════ -->
<!--  07 · HOLD TO CONFIRM (destructive)           -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="07 · Hold to confirm — destructive" level="H3" />
</Toolbar>
<FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" class="sapUiSmallMarginBottom" gap="1rem">
  <!-- Varsayılan 1100ms -->
  <ux7:ExButton id="btnHold1" type="hold" size="l" icon="sap-icon://delete" text="Hold to delete project" confirm="onHoldConfirm" />

  <!-- Daha uzun, custom confirmText -->
  <ux7:ExButton id="btnHold2" type="hold" size="l" text="Hold to revoke access" holdDuration="1800" confirmText="Access revoked" confirm="onHoldConfirm" />

  <!-- Confirm sayısı (test feedback) -->
  <Text id="lblHoldCounter" text="0 onay tamamlandı" class="sapUiTinyMarginBegin" />
</FlexBox>


<!-- ════════════════════════════════════════════ -->
<!--  08 · SIZE matrix                             -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="08 · Sizes — s · m · l · xl · xxl" level="H3" />
</Toolbar>
<FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" class="sapUiSmallMarginBottom" gap="1rem">
  <ux7:ExButton id="btnS" size="s" text="Small" press="onPress" />
  <ux7:ExButton id="btnM" size="m" text="Medium" press="onPress" />
  <ux7:ExButton id="btnL" size="l" text="Large" press="onPress" />
  <ux7:ExButton id="btnXL" size="xl" text="XLarge" press="onPress" />
  <ux7:ExButton id="btnXXL" size="xxl" text="XXLarge" press="onPress" />
</FlexBox>

<Title text="08 · Height" level="H3" />
<FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" class="sapUiSmallMarginBottom" gap="1rem">
  <ux7:ExButton type="tactile" size="l" text="Submit order" height="1rem" press="onPress" />
  <ux7:ExButton type="tactile-charcoal" size="l" icon="sap-icon://play" text="Run job" height="2rem" press="onPress" />

  <ux7:ExButton type="neu" size="l" text="Save draft" height="3rem" press="onPress" />
  <ux7:ExButton type="neu-accent" size="l" icon="sap-icon://ai" text="Generate" height="4rem" press="onPress" />
  <ux7:ExButton type="neu" size="l" iconOnly="true" icon="sap-icon://action-settings" text="Settings" height="5rem" press="onPress" />
</FlexBox>

<!-- ════════════════════════════════════════════ -->
<!--  09 · ICON variants                           -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="09 · Icon variants" level="H3" />
</Toolbar>
<FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" class="sapUiSmallMarginBottom" gap="1rem">
  <ux7:ExButton id="btnIconLeft" icon="sap-icon://add" iconPos="left" text="Icon Left" press="onPress" />
  <ux7:ExButton id="btnIconRight" icon="sap-icon://edit" iconPos="right" text="Icon Right" press="onPress" />
  <ux7:ExButton id="btnIconOnly" icon="sap-icon://delete" iconOnly="true" text="Sil" press="onPress" />

  <ux7:ExButton type="primary" icon="sap-icon://download" iconOnly="true" text="Download" press="onPress" />
  <ux7:ExButton type="secondary" icon="sap-icon://search" iconOnly="true" text="Search" press="onPress" />
  <ux7:ExButton type="ghost" icon="sap-icon://action-settings" iconOnly="true" text="Settings" press="onPress" />
  <ux7:ExButton type="pill" icon="sap-icon://navigation-right-arrow" iconOnly="true" text="Next" press="onPress" />
  <ux7:ExButton type="tactile" icon="sap-icon://navigation-right-arrow" iconOnly="true" text="Next" press="onPress" />
</FlexBox>


<!-- ════════════════════════════════════════════ -->
<!--  10 · WIDTH                                   -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="10 · Width" level="H3" />
</Toolbar>
<VBox class="sapUiSmallMarginBottom" gap="1rem">
  <ux7:ExButton id="btnFull" width="full" text="Full Width" press="onPress" />
  <ux7:ExButton id="btnCustomWidth" width="200px" text="200px Width" press="onPress" />
</VBox>


<!-- ════════════════════════════════════════════ -->
<!--  11 · LOADING & DISABLED                      -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="11 · Loading &amp; disabled" level="H3" />
</Toolbar>
<FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" class="sapUiSmallMarginBottom" gap="1rem">
  <ux7:ExButton id="btnLoading" loading="true" text="Loading" press="onPress" />
  <ux7:ExButton id="btnDisabled" enabled="false" text="Disabled" press="onPress" />
  <ux7:ExButton type="tactile" loading="true" text="Loading" press="onPress" />
  <ux7:ExButton type="grad-fiori" loading="true" text="Activating" press="onPress" />
</FlexBox>


<!-- ════════════════════════════════════════════ -->
<!--  12 · STATE TESTS                             -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="12 · State tests (success / error / timer)" level="H3" />
</Toolbar>
<FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" class="sapUiSmallMarginBottom" gap="1rem">
  <ux7:ExButton id="btnStateSuccess" text="State: Success Tetikle" press="onStateSuccess" />
  <ux7:ExButton id="btnStateError" text="State: Error Tetikle" press="onStateError" />
  <ux7:ExButton id="btnStateDouble" text="State: Çift Tetikle (Timer Bug)" press="onStateDouble" />
</FlexBox>


<!-- ════════════════════════════════════════════ -->
<!--  13 · DYNAMIC TOGGLES (no-reinvalidate test)  -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="13 · Dynamic toggles (setText / setLoading / setType)" level="H3" />
</Toolbar>
<FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" class="sapUiSmallMarginBottom" gap="1rem">
  <ux7:ExButton id="btnToggleLoad" text="Loading Toggle" press="onToggleLoading" />
  <ux7:ExButton id="btnToggleText" text="Başlangıç Metni" press="onToggleText" />
  <ux7:ExButton id="btnToggleType" text="Type Toggle" press="onToggleType" />
</FlexBox>


<!-- ════════════════════════════════════════════ -->
<!--  14 · KEYBOARD & DEBOUNCE                     -->
<!-- ════════════════════════════════════════════ -->
<Toolbar design="Transparent">
  <Title text="14 · Keyboard &amp; debounce" level="H3" />
</Toolbar>
<FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" class="sapUiSmallMarginBottom" gap="1rem">
  <ux7:ExButton id="btnKeyboard" text="Klavye Test (Tab → Enter/Space)" press="onPress" />
  <ux7:ExButton id="btnDebounce" text="Çift Tık Test (300ms)" press="onPressDebounce" />
</FlexBox>