النوافذ والأدراج

<p class="p-note">مساحة مركّزة لإجراء مهم. تدعم هذه النافذة لوحة المفاتيح وزر الهروب وعنوانًا واضحًا لقارئات الشاشة.</p>
<button type="button" class="btn btn-primary" data-premium-dialog>
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect x="2" y="3" width="20" height="14" rx="2"/>
<path d="M8 21h8m-4-4v4"/>
</svg>فتح النافذة</button>

<p class="p-note">صفحة تفاصيل قابلة لإعادة الاستخدام، مع سجلات مترابطة وأنشطة وإجراءات.</p>
<button type="button" class="btn btn-primary" data-premium-drawer>
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M4 6h16M4 12h16M4 18h16"/>
</svg>فتح الدرج الجانبي</button>

<p class="p-note">يؤثر هذا المثال على بيانات التجربة فقط.</p>
<button type="button" class="btn btn-outline" data-premium-confirm>
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m12 2 8 3v6c0 6-8 11-8 11S4 17 4 11V5l8-3Z"/>
<path d="m8 12 3 3 5-6"/>
</svg>تأكيد إجراء</button>

<details class="action-dropdown">
<summary class="btn btn-secondary">الإجراءات<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m6 9 6 6 6-6"/>
</svg>
</summary>
<div class="dropdown-links">
<a href="pages/commerce/catalog.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 7h14l2 14H3L5 7Z"/>
<path d="M8 8V6a4 4 0 0 1 8 0v2"/>
</svg>كتالوج المنتجات</a>
<a href="pages/workspace/contacts.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="9" cy="8" r="3"/>
<path d="M3 21v-2a6 6 0 0 1 12 0v2M16 5a3 3 0 0 1 0 6m2 4a5 5 0 0 1 3 4v2"/>
</svg>دليل جهات الاتصال</a>
<a href="pages/workspace/tickets.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M21 11a9 9 0 0 1-9 9H4l-3 2 2-7a9 9 0 1 1 18-4Z"/>
<path d="M7 10h10m-10 4h6"/>
</svg>تذاكر الدعم</a>
</div>
</details>

<div class="flex wrap">
<button type="button" class="btn btn-primary" data-premium-toast="success">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m5 12 4 4L20 5"/>
</svg>نجاح</button>
<button type="button" class="btn btn-danger" data-premium-toast="error">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m6 6 12 12M6 18 18 6"/>
</svg>خطأ</button>
</div>