الحالات والتنبيهات

<div class="flex wrap">
<button type="button" class="btn btn-primary" data-state-run="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="m13 2-9 12h7l-1 8 10-13h-7l0-7Z"/>
</svg>محاكاة النجاح</button>
<button type="button" class="btn btn-secondary" data-state-run="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>
<div class="p-state-preview" data-request-state aria-live="polite">
<div>
<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="12" cy="12" r="9"/>
<ellipse cx="12" cy="12" rx="4" ry="9"/>
<path d="M3 12h18"/>
</svg>
<p>أنماط عملية وأمثلة واضحة قابلة للتخصيص لمشروعك.</p>
</div>
</div>

<div class="p-empty">
<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="M3 8V6a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Z"/>
</svg>
<h3>لا توجد سجلات مطابقة</h3>
<p>جرّب بحثًا آخر أو أزل الفلاتر.</p>
<a class="btn btn-primary section-copy" 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">
<path d="M12 5v14M5 12h14"/>
</svg>إضافة سجل</a>
</div>

<div class="p-stack">
<div class="alert alert-success" role="status">
<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>
<span>تم حفظ تغييراتك. كل شيء جاهز.</span>
<button class="icon-button" data-dismiss-premium-alert aria-label="إغلاق">
<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>
<div class="alert alert-info" role="status">
<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="12" cy="12" r="9"/>
<ellipse cx="12" cy="12" rx="4" ry="9"/>
<path d="M3 12h18"/>
</svg>
<span>رؤية جديدة على بُعد نقرة واحدة.</span>
<button class="icon-button" data-dismiss-premium-alert aria-label="إغلاق">
<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>
<div class="alert alert-warning" role="alert">
<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="M18 8a6 6 0 0 0-12 0c0 8-3 8-3 10h18c0-2-3-2-3-10ZM9 21h6"/>
</svg>
<span>يرجى مراجعة التفاصيل قبل المتابعة.</span>
<button class="icon-button" data-dismiss-premium-alert aria-label="إغلاق">
<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>
<div class="alert alert-danger" role="alert">
<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>
<span>فشل الطلب التجريبي. يمكنك المحاولة مجددًا.</span>
<button class="icon-button" data-dismiss-premium-alert aria-label="إغلاق">
<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>
</div>

<div class="p-stack" aria-label="جارٍ التحميل">
<div class="p-skeleton">
</div>
<div class="p-skeleton">
</div>
<div class="p-skeleton">
</div>
</div>