زر مع قائمة

نظرة عامة

link

Web

tanrei-button-with-menu

schedule

SwiftUI

TanreiButtonWithMenu

radio_button_unchecked

Jetpack Compose

TanreiButtonWithMenu

radio_button_unchecked

Flutter

TanreiButtonWithMenu

radio_button_unchecked

React Native

ButtonWithMenu

radio_button_unchecked

مولَّد من docs/status/status.json, specs/button-with-menu.spec.json

ما آل إليه split button

لا يسمّى هذا المكوّن split button. الاسم «Split button» يقول كيف يبدو، أي زر مقطوع إلى اثنين، وكذلك تبدو مجموعة الأزرار من الطراز connected؛ وما يميّز هذا المكوّن هو قائمة الخيارات التي يكشفها نصفه الثاني. ومعرّفات سلوكه تحمل البادئة SPB من ذلك الاسم.

قبل	الآن
Split button (split-button)	زر مع قائمة (button-with-menu)
comp.split-button.*، --tanrei-comp-split-button-*	comp.button-with-menu.*، --tanrei-comp-button-with-menu-*
<tanrei-split-button>، TanreiSplitButton (صنف الويب)	<tanrei-button-with-menu>، TanreiButtonWithMenu
SplitButton (React و React Native)	ButtonWithMenu
TanreiSplitButton (SwiftUI و Compose و Flutter)	TanreiButtonWithMenu

يسمّي Material 3 نظيره split button؛ وفي الإعدادات الجاهزة m3-like يكون الزر مع قائمة هو ذلك المكوّن.

المنصات الأصلية لم تغيّر اسمه بعد

المواصفة والرموز (tokens) وعنصر الويب (<tanrei-button-with-menu>) ومغلِّف React (ButtonWithMenu) تحمل الاسم button with menu، والويب يرسم هذه المراجعة. أما SwiftUI و Compose و Flutter و React Native فما زالت تقدّم المراجعة السابقة بالاسم split button، ولذلك تستخدم شيفرتها في هذه الصفحة TanreiSplitButton و SplitButton؛ ويتغيّر ذلك حين تغيّر كل منصة اسم المكوّن.

تأتي هذه المراجعة بما يلي، ولا يرسمه حتى الآن إلا الويب:

• النصفان موصولان بخط فاصل أو بفجوة. يختار نظام التصميم مرة واحدة للمكوّنات كلها، ويستطيع نظام تصميم أن يخص هذا المكوّن باختيار مختلف، والخاصية separation (auto أو divider أو gap) تضبط مثيلًا واحدًا. النظام الافتراضي يرسم فاصلًا.
• الحشو من جهة الأيقونة في نصف البداية أضيق بدرجة، والطرفان الخارجيان المستديران ينالان حشوًا أكثر قليلًا.
• نصف النهاية يحتفظ بشكله ما دامت القائمة مفتوحة؛ والسهم الصغير (chevron) وحده يُظهر حالة الفتح.
• الخاصية trailingWidth (default أو narrow) ترسم نصف نهاية أنحف: السهم الصغير وهامش داخلي صغير من كل جهة، مع حشو أكثر قليلًا عند طرفه الخارجي المستدير كما في العرض الافتراضي.

الطُرُز

مع قائمته: اضغط نصف النهاية

save

الاستخدام

link

الزر مع قائمة زران موصولان في شكل واحد. نصف البداية ينفّذ الإجراء الرئيسي. ونصف النهاية، وفيه السهم الصغير، يفتح قائمة خيارات من الإجراءات المرتبطة. محتوى القائمة هو أنواع العناصر الخاصة بقائمة الخيارات نفسها (إجراءات، وعناصر خانة اختيار، وعناصر زر اختيار، ومجموعات)، ويُمرَّر بالطريقة التي تمرّر بها كل منصة عناصر القائمة.

<tanrei-button-with-menu label="حفظ" menu-label="خيارات حفظ إضافية">
  <span slot="icon">save</span>
  <tanrei-menu-item slot="menu" label="حفظ باسم…"></tanrei-menu-item>
  <tanrei-menu-item slot="menu" label="حفظ نسخة"></tanrei-menu-item>
</tanrei-button-with-menu>

<script type="module">
  import '@tanrei/web/components/button-with-menu';
  import '@tanrei/web/components/menu';
  const split = document.querySelector('tanrei-button-with-menu');
  // لا يصل إلى العنصر إلا الحدث click من نصف البداية.
  split.addEventListener('click', save);
  // نصف النهاية يطلب الفتح أو الإغلاق؛ وأنت تضبط open.
  split.addEventListener('toggle', (e) => (split.open = e.detail.open));
  // الحدث close يحمل سبب القائمة: escape أو outside أو tab أو focus-out أو item (ليس في الويب back).
  split.addEventListener('close', () => (split.open = false));
  // الحدث click على عنصر يتوقف عند الزر مع قائمة: استمع على العنصر نفسه.
  split.querySelector('[label="حفظ باسم…"]').addEventListener('click', saveAs);
</script>

<!-- مثيل واحد موصول بفجوة، ونصف نهايته نحيف. احذف separation ليتبع نظام التصميم. -->
<tanrei-button-with-menu variant="tonal" separation="gap" trailing-width="narrow" label="دمج" menu-label="خيارات دمج إضافية">
  <tanrei-menu-item slot="menu" label="ضغط ودمج"></tanrei-menu-item>
  <tanrei-menu-item slot="menu" label="إعادة تأسيس ودمج"></tanrei-menu-item>
</tanrei-button-with-menu>

<!-- يُفتح عند التحويم بعد 400 ms، وكذلك عند الضغط؛ وله رسمه الخاص، مغلقًا ومفتوحًا. -->
<tanrei-button-with-menu label="مشاركة" menu-label="خيارات مشاركة إضافية" hover-open hover-delay="400">
  <span slot="chevron">more_vert</span>
  <span slot="chevron-open">close</span>
  <tanrei-menu-item slot="menu" label="نسخ الرابط"></tanrei-menu-item>
  <tanrei-menu-item slot="menu" label="بريد إلكتروني"></tanrei-menu-item>
</tanrei-button-with-menu>

import { ButtonWithMenu, MenuItem } from '@tanrei/react';

// onClick يخص نصف البداية. و onClick في MenuItem مستمع على عنصر القائمة نفسه،
// فيُستدعى داخل ButtonWithMenu؛ ويستقبل الحدث الأصلي MouseEvent.
<ButtonWithMenu
  label="حفظ"
  menuLabel="خيارات حفظ إضافية"
  open={open}
  onClick={save}
  onToggle={(e) => setOpen(e.detail.open)}
  onClose={() => setOpen(false)}
>
  <MenuItem slot="menu" label="حفظ باسم…" onClick={saveAs} />
  <MenuItem slot="menu" label="حفظ نسخة" onClick={saveCopy} />
</ButtonWithMenu>

// مثيل واحد موصول بفجوة، ونصف نهايته نحيف.
<ButtonWithMenu variant="tonal" separation="gap" trailingWidth="narrow" label="دمج" menuLabel="خيارات دمج إضافية"
  open={mergeOpen} onClick={merge} onToggle={(e) => setMergeOpen(e.detail.open)} onClose={() => setMergeOpen(false)}>
  <MenuItem slot="menu" label="ضغط ودمج" onClick={squash} />
  <MenuItem slot="menu" label="إعادة تأسيس ودمج" onClick={rebase} />
</ButtonWithMenu>

// يُفتح عند التحويم أيضًا؛ والقيمة null في hoverDelay تأخذ مهلة النظام.
<ButtonWithMenu label="مشاركة" menuLabel="خيارات مشاركة إضافية" hoverOpen hoverDelay={400} open={shareOpen}
  onToggle={(e) => setShareOpen(e.detail.open)} onClose={() => setShareOpen(false)}>
  <span slot="chevron">more_vert</span>
  <span slot="chevron-open">close</span>
  <MenuItem slot="menu" label="نسخ الرابط" onClick={copyLink} />
</ButtonWithMenu>

import Tanrei

// العنوان أولًا، كما في Button. نصف النهاية والقائمة كلاهما يكتب في الربط (binding).
TanreiSplitButton("حفظ", menuLabel: "خيارات حفظ إضافية", isMenuPresented: $showsSaveOptions, action: save) {
    TanreiMenuItem("حفظ باسم…", action: saveAs)
    TanreiMenuItem("حفظ نسخة", action: saveCopy)
}

// يُفتح عند التحويم أيضًا (macOS، و iPadOS مع مؤشر)؛ والقيمة nil في hoverDelay تأخذ مهلة النظام.
// chevron: و openChevron: يأخذ كل منهما بانيًا للرسم، للمنفذين chevron و chevron-open.
TanreiSplitButton("مشاركة", menuLabel: "خيارات مشاركة إضافية", isMenuPresented: $showsShareOptions,
                  opensOnHover: true, hoverDelay: .milliseconds(400), action: share) {
    TanreiMenuItem("نسخ الرابط", action: copyLink)
}

import io.github.chnotchy.tanrei.components.TanreiMenuItem
import io.github.chnotchy.tanrei.components.TanreiSplitButton
import io.github.chnotchy.tanrei.primitives.TanreiText
import io.github.chnotchy.tanrei.tokens.TanreiSplitButtonVariant

// رفع الحالة (state hoisting)، كما في القائمة: أنت تحتفظ بالقيمة menuExpanded.
TanreiSplitButton(
    text = "حفظ",
    onClick = ::save,
    menuContentDescription = "خيارات حفظ إضافية",
    menuExpanded = expanded,
    onMenuExpandedChange = { expanded = it },
    onMenuDismissRequest = { expanded = false }, // يستقبل TanreiMenuCloseReason
    variant = TanreiSplitButtonVariant.Tonal,
    icon = { TanreiText("save") },
) {
    TanreiMenuItem(text = "حفظ باسم…", onClick = ::saveAs)
    TanreiMenuItem(text = "حفظ نسخة", onClick = ::saveCopy)
}

// يُفتح عند التحويم أيضًا، للفأرة أو القلم؛ والقيمة null في hoverDelayMillis تأخذ مهلة النظام.
TanreiSplitButton(
    text = "مشاركة",
    onClick = ::share,
    menuContentDescription = "خيارات مشاركة إضافية",
    menuExpanded = shareExpanded,
    onMenuExpandedChange = { shareExpanded = it }, // ضغطة أو مفتاح أو تحويم
    onMenuDismissRequest = { shareExpanded = false },
    chevron = { TanreiText("more_vert") },
    openChevron = { TanreiText("close") },
    openOnHover = true,
    hoverDelayMillis = 400,
) {
    TanreiMenuItem(text = "نسخ الرابط", onClick = ::copyLink)
}

import 'package:tanrei/tanrei.dart';

// الزر مع قائمة يفتح القائمة ويغلقها عبر المتحكم (controller)؛ و onMenuToggle و onMenuClose يبلّغان بذلك.
TanreiSplitButton(
  label: 'حفظ',
  menuSemanticLabel: 'خيارات حفظ إضافية',
  onPressed: save, // القيمة null في onPressed تعطّل النصفين
  menuController: saveOptions,
  menuChildren: <Widget>[
    TanreiMenuItem(onPressed: saveAs, child: const Text('حفظ باسم…')),
    TanreiMenuItem(onPressed: saveCopy, child: const Text('حفظ نسخة')),
  ],
);

// يُفتح عند التحويم أيضًا، ولا يُفتح باللمس أبدًا؛ و chevron و openChevron يأخذ كل منهما widget للرسم.
TanreiSplitButton(
  label: 'مشاركة',
  menuSemanticLabel: 'خيارات مشاركة إضافية',
  onPressed: share,
  openOnHover: true,
  hoverDelay: const Duration(milliseconds: 400), // القيمة null تأخذ مهلة النظام
  menuChildren: <Widget>[
    TanreiMenuItem(onPressed: copyLink, child: const Text('نسخ الرابط')),
  ],
);

import { SplitButton } from '@tanrei/react-native';

// متحكَّم به: اضبط menuVisible من onMenuToggle، وعلى false من onMenuDismiss الذي يستقبل السبب.
<SplitButton
  label="حفظ"
  icon="save"
  menuAccessibilityLabel="خيارات حفظ إضافية"
  menuVisible={open}
  onPress={save}
  onMenuToggle={setOpen}
  onMenuDismiss={() => setOpen(false)}
  menuItems={[
    { label: 'حفظ باسم…', onPress: saveAs },
    { label: 'حفظ نسخة', onPress: saveCopy },
  ]}
/>

// يُفتح عند التحويم أيضًا، للمؤشر فقط؛ و chevron و openChevron اسما رسمين.
<SplitButton
  label="مشاركة"
  menuAccessibilityLabel="خيارات مشاركة إضافية"
  chevron="more_vert"
  openChevron="close"
  hoverOpen
  hoverDelay={400}
  menuVisible={shareOpen}
  onPress={share}
  onMenuToggle={setShareOpen}
  onMenuDismiss={() => setShareOpen(false)}
  menuItems={[{ label: 'نسخ الرابط', onPress: copyLink }]}
/>

الوصل بفاصل أو بفجوة

link

يوصَل النصفان بإحدى طريقتين. مع الفاصل يتلامسان، وتكون الزوايا حيث يلتقيان مربّعة، ويحدّد خطٌّ موضع الوصل. ومع الفجوة تفصل بينهما فجوة ضيقة، وتكون زواياهما أقل استدارة حيث يواجه أحدهما الآخر. يختار نظام التصميم مرة واحدة لكل المكوّنات التي تصل أجزاء (النظام الافتراضي يرسم فاصلًا)، ويستطيع نظام تصميم أن يخص هذا المكوّن باختيار مختلف، والخاصية separation (auto أو divider أو gap) تضبط مثيلًا واحدًا. ويبقى النصفان دائمًا جنبًا إلى جنب: لا توجد هيئة عمودية.

موصول بفاصل وبفجوة

نصف نهاية ضيق

link

افتراضيًّا يحمل نصف النهاية السهم الصغير في مربع بارتفاع الزر، مع حشو أكثر قليلًا عند طرفه الخارجي المستدير. وحين تُضبط الخاصية trailingWidth على القيمة narrow يصير مقبضًا نحيفًا على الإجراء الرئيسي: السهم الصغير مع هامش داخلي صغير من كل جهة، والحشو الإضافي القليل نفسه عند طرفه الخارجي المستدير، فيبدو السهم في الوسط أمام الانحناء (32 و 36 و 36 في النظام الافتراضي: عرض زر ضيق ذي أيقونة وحدها من الحجم نفسه مضافًا إليه ذلك الحشو). ونصف البداية هو نفسه في العرضين.

عرض نصف النهاية: default و narrow، في كل حجم

يُرسم نصف النهاية الضيق أضيق من الحد الأدنى للهدف، لكن مساحة لمسه ليست كذلك: فالهدف يمتد نحو الخارج، إلى ما وراء حافة النهاية. اترك له فسحة هناك، كما تترك بجانب زر ضيق ذي أيقونة وحدها.

الإجراءات المدمرة

link

اضبط destructive على زر مع قائمة يحذف إجراؤه الرئيسي أو يتجاهل شيئًا قد لا يُستعاد: حذف، وفي قائمته «حذف كل الإصدارات». يحتفظ النصفان كلاهما بدرجة إبراز الطراز ويأخذان لون الخطأ فيها، كما يفعل زر مدمّر من الطراز نفسه. فالزر من الطراز filled يُملأ بلون الخطأ، ومن الطراز tonal بحاوية الخطأ؛ والزر من الطراز elevated أو outlined يرسم التسمية والسهم الصغير بلون الخطأ، ومن الطراز outlined حافته وفاصله أيضًا. وحين يكون معطَّلًا يبدو كأي زر مع قائمة معطَّل من طرازه.

destructive يَسِم النصفين فقط، ولا يَسِم عناصر القائمة أبدًا. فقد يحذف خيار في القائمة ما لا يحذفه الإجراء الرئيسي، أو العكس، لذا أعطِ كل عنصر يحذف destructive الخاص به.

أزرار مع قائمة مدمّرة: بكل طراز، وموصولة بفجوة

المواصفات

link

الأحجام، وأيقونة، ومفتوح، ومعطَّل

savemore_vertclosemore_vertclose

البنية

الجزء	الوصف
1 leading	The leading half: a button that performs the main action. It holds the optional icon and the label, and carries its own hover, focus and press.
2 trailing	The trailing half: a button that opens and closes the menu of more options. It holds the chevron and carries its own hover, focus and press, at its default width or a narrow one. With hoverOpen on, a fine pointer resting on it opens the menu too.
3 container	Each half's shape: its fill, outline, elevation and corners. The halves share one look (the destructive one too, SPB-34) and are joined by a divider or by a narrow gap (separation): round outer ends, and under gap tighter corners where they face each other. The trailing half keeps its shape while the menu is open in the default system.
4 icon · اختياري	A glyph before the label in the leading half, drawn in the label color; the padding on its side is a step tighter than without it, as Button's.
5 label	The leading half's text and its accessible name.
6 chevron	The trailing half's glyph. By default it is the icon set's expand_more, turned half a turn while the menu is open. The chevron slot replaces it, and the chevron-open slot gives the trailing half a different glyph while the menu is open.
7 divider · اختياري	Under divider, the line on the seam where the two halves touch. Under gap there is none.
8 menu	The Tanrei Menu the trailing half opens, anchored to the whole button with menu. It keeps its own tokens and behaviour.
9 focus-ring	Gap-then-ring indicator shown for keyboard focus, around whichever half has it.

الخصائص

الخاصية	النوع	القيمة الافتراضية	الوصف
variant	filled | tonal | elevated | outlined	"filled"	Emphasis, as Button's variants of the same names. A design system may add values.
destructive	boolean	false	Marks a main action that deletes or discards something a person may not get back (Delete, with Delete all in the menu): both halves keep their variant's emphasis and take the error role's color in it, as a destructive Button of the same variant does (SPB-34). Use it for that kind of action alone, never for emphasis. It adds a color, not a meaning: the label still says what the action does (SPB-35). The menu's items are not marked by it: an item that deletes carries its own destructive.
size	small | medium | large	"medium"	Visual height (32 / 40 / 56), matching Button's heights. The hit area always meets the minimum target. A design system may add values.
separation	auto | divider | gap	"auto"	How the two halves are joined. divider: they touch, and a line is drawn on the seam. gap: they stand a narrow gap apart, with tighter corners where they face each other. Auto takes comp.button-with-menu.container.separation, the design system's answer (divider in the default system). The halves always sit side by side: there is no vertical form.
trailingWidth	default | narrow	"default"	How wide the trailing half is. default holds the chevron in a square of the height (32 / 40 / 56); narrow makes the half a slim handle on the main action: the chevron with a small inset on each side, and the padding at the rounded outer end (32 / 36 / 36), as the default width takes it too. The hit area meets the minimum target at both.
label	string	""	The leading half's visible text and accessible name ("Save"). Required.
menuLabel	string	""	The trailing half's accessible name ("More save options"). Required: the chevron alone is not a name.
open	boolean	false	Whether the menu is shown. Where open is a plain value (web, Compose, React Native) the product sets it from toggle and sets it to false from close; where it is a binding or a controller (SwiftUI, Flutter) the button with menu opens and closes the menu through it (SPB-2, SPB-16).
disabled	boolean	false	Prevents interaction with both halves and removes them from the focus order.
hoverOpen	boolean	false	Also opens the menu when a fine pointer rests on the trailing half for hoverDelay, and closes that menu when the pointer leaves the trailing half and the menu (SPB-22 to SPB-25). A press and the keyboard still open it as without. Never applies to touch.
hoverDelay	number	null	How long, in milliseconds, a fine pointer rests on the trailing half before the menu opens on hover. Null takes comp.button-with-menu.motion.hover-open-delay. Ignored unless hoverOpen is true.

المنافذ

المنفذ	الوصف
icon	The leading half's icon (a glyph of the system's icon set).
chevron	The trailing half's glyph in place of expand_more (one glyph of the system's icon set). Alone, it is turned half a turn while the menu is open, as the default is; with chevron-open it is the closed form only (SPB-21).
chevron-open	The trailing half's glyph while the menu is open (one glyph of the system's icon set). When it is filled, the trailing half cross-fades between the closed glyph and this one instead of turning (SPB-21).
menu	The menu's content: the menu's own item kinds (item, checkbox-item, radio-item and group, as the menu spec defines them), which the button with menu presents in a Tanrei Menu. Fixtures cannot fill it (SPB-15).

الأحداث

الحدث	الوصف
click	The leading half was activated by pointer, touch, keyboard or assistive technology.
toggle	The trailing half asks to open or close the menu: by a press or a key on it (SPB-2), or, with hoverOpen on, by a fine pointer resting on it or leaving it and the menu (SPB-22, SPB-23). Carries the open value it asks for.
close	The menu asks to be closed; carries the menu's reason: escape, back, outside, tab, focus-out, item or anchor-hidden (in the platform's casing); anchor-hidden when the button with menu is no longer drawn while its menu is open (MNU-65).

الحالات

السلوك

متطلبات بصيغة EARS. يُختبر تنفيذ كل منصة مقابل هذه المعرّفات. يُعرض نص المتطلبات كما ورد في ملف المواصفة، بالإنجليزية.

المعرّف	المتطلب
SPB-1	WHEN the user activates the leading half by pointer, touch, Enter or Space THE button with menu SHALL emit click exactly once, and SHALL NOT open or close the menu.
SPB-2	WHEN the user activates the trailing half by pointer, touch, Enter or Space THE button with menu SHALL emit toggle exactly once with the opposite of open, and WHEN the user presses Down Arrow on the trailing half while open is false it SHALL emit toggle with true; the menu SHALL then open or close through open: through its binding or controller where open is one (SwiftUI, Flutter), and by the product setting open where open is a plain value (web, Compose, React Native). A menu that is open from hover is the exception: activating the trailing half then keeps it open and emits no toggle (SPB-24).
SPB-3	WHILE disabled is true THE button with menu SHALL NOT emit click, toggle or close, SHALL NOT make either half focusable, SHALL expose the disabled state on both halves and SHALL present no menu, whatever open says; it SHALL NOT open the menu on hover, whatever hoverOpen says.
SPB-4	WHILE a half is hovered, keyboard-focused or pressed THE button with menu SHALL render that half's container, label, icon or chevron, outline, elevation and opacity from the component tokens of its variant in that half's highest-precedence active state, with precedence pressed over focused over hovered, and SHALL keep the other half at its own state (neither half is hovered or pressed while the pointer or the press is on the other); focus gained by pointer or touch SHALL NOT select the focused state.
SPB-5	WHEN a half receives keyboard focus THE button with menu SHALL show the focus ring around that half's own shape, without animation; focus gained by pointer or touch SHALL NOT show it.
SPB-6	WHERE a half is smaller than the minimum target THE button with menu SHALL extend that half's hit area on both axes to sys.target.touch for touch input and sys.target.pointer for fine pointers without changing its visual size — above and below, and outward past the button with menu's start edge for the leading half and past its end edge for the trailing half — and toward the other half no further than the middle of the gap between them, or the seam where they touch, so that the two never overlap; a narrow trailing half SHALL reach its target the same way and SHALL NOT be drawn wider for it; a platform that cannot tell the input type SHALL use sys.target.touch.
SPB-7	WHILE disabled is true THE button with menu SHALL render both halves' containers, label, icon, chevron, outline, elevation and opacity from the disabled component tokens of its variant. A disabled button with menu SHALL draw its closed form (the trailing half's closed shape and the closed chevron: the chevron slot's glyph, or expand_more when that slot is empty, unturned), whatever open says.
SPB-8	WHEN variant or size names a value that the active design system does not have THE button with menu SHALL render with the default value's tokens, and WHEN separation or trailingWidth names a value it does not define THE button with menu SHALL render with that prop's default (auto, default); in debug builds it SHALL report the unknown value.
SPB-9	WHEN a half of the button with menu is pressed by pointer, touch, Enter or Space THE half SHALL show the pressed state without delay and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner.
SPB-10	WHILE pressed THE half SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container at once; ripple grows the pressed state layer from the point of contact (from the center for keyboard activation); dim applies the pressed opacity to the whole control and draws no state layer; none draws no answer to the press. Under ripple and dim only the container color stays with the state under the press; label, icon, chevron, outline, elevation, opacity and shape still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.button-with-menu.motion.feedback-duration with comp.button-with-menu.motion.state-easing, fades over comp.button-with-menu.motion.state-duration with comp.button-with-menu.motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced.
SPB-11	THE half SHALL ease its container corners by sys.shape.corner-smoothing (0 is a quarter circle, 0.6 the iOS continuous corner; a platform with only the OS curve draws it for any amount above 0) and show its keyboard focus as sys.behavior.focus-style names (ring or glow); a platform that cannot draw a choice SHALL fall back to the first value and state that in its README.
SPB-12	THE button with menu SHALL draw its two halves in one row, joined as its separation names (SPB-30): the leading half at least the height of its size (comp.button-with-menu.container.height.medium for medium, and so on) and as wide as its content, holding its icon, when it has one, and then its label, comp.button-with-menu.container.gap.medium apart, padded at the start by comp.button-with-menu.leading.padding-inline-start-with-icon.medium when it has an icon and by comp.button-with-menu.leading.padding-inline-start.medium when it has none, at the end by comp.button-with-menu.leading.padding-inline-end.medium, and above and below by at least comp.button-with-menu.container.padding-block.medium; and the trailing half as tall as the leading half, holding the chevron centred between comp.button-with-menu.trailing.padding-inline.medium on each side WHILE trailingWidth is default and between comp.button-with-menu.trailing.padding-inline-narrow.medium on each side WHILE trailingWidth is narrow (and so on for each size). Each half SHALL then take the outer padding of SPB-32. THE button with menu SHALL NOT stack its halves: it has no vertical form.
SPB-13	THE button with menu SHALL round the leading half's start corners and the trailing half's end corners by comp.button-with-menu.container.shape, capped at half that half's height (so that the default system's sys.shape.corner.full draws round ends) and eased by sys.shape.corner-smoothing. WHILE its separation is gap it SHALL round the corners where the halves face each other by comp.button-with-menu.container.inner-shape and, WHILE open is true, the trailing half's by comp.button-with-menu.container.inner-shape-open, each capped and eased the same way; WHILE its separation is divider those corners SHALL be square, open or not. WHILE open is true the chevron SHALL show its open form (SPB-21). WHEN open changes THE button with menu SHALL change the chevron, and the trailing half's inner corners where the two tokens differ, over comp.button-with-menu.motion.open-duration with comp.button-with-menu.motion.open-easing, and at once where motion is reduced. THE button with menu SHALL NOT change the shape of a half for any other reason: where comp.button-with-menu.container.inner-shape-open has the value of comp.button-with-menu.container.inner-shape, as in the default system, the trailing half keeps its shape while the menu is open and the chevron alone shows it. Each half SHALL clip its fill, state layer and ripple to its own shape, and draw its outline and its elevation's ring as SPB-26 says.
SPB-14	THE button with menu SHALL set the label in the text style of its size (comp.button-with-menu.label.typescale.medium, and so on) and the label color of its variant and the leading half's state (comp.button-with-menu.filled.label.color for filled at rest, and so on), SHALL NOT truncate it (it stays on one line while it fits, wraps when the layout gives it less width, and the halves grow in height with it), and SHALL draw the icon and the chevron (expand_more, or a chevron slot's glyph, SPB-21) at the icon size of its size (comp.button-with-menu.icon.size.medium, and so on) through the icon helper, each in the label color of its own half's state, with the family and fill of an unselected icon, sys.icon.weight, and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max.
SPB-15	WHEN open becomes true THE button with menu SHALL present the items of its menu slot as a Tanrei Menu, which then behaves as MNU-1 to MNU-29 say, anchored to the whole button with menu with placement bottom-end (below it with the end edges aligned, flipping as MNU-2 says), with the trailing half as the element focus returns to when the menu closes: an operated overlay that is not modal, as the menu is; a menu that opens from hover SHALL NOT take focus (SPB-22). WHEN open becomes false THE button with menu SHALL remove the menu.
SPB-16	WHEN the menu asks to be closed (MNU-5, MNU-6) THE button with menu SHALL emit close once with the menu's reason and SHALL be closed: through its binding or controller where open is one (SwiftUI, Flutter), and by the product setting open to false where open is a plain value (web, Compose, React Native); WHEN an action item of the menu is activated THE button with menu SHALL let the item emit its click first and then emit close with the reason item. A press on the trailing half while the menu is open is not a press outside: it SHALL emit toggle with false (SPB-2), or keep a menu that is open from hover open (SPB-24), and emit no close.
SPB-17	THE button with menu SHALL expose two buttons in reading order, each its own Tab stop: the leading half named by label, and the trailing half named by menuLabel, exposing that it opens a menu and whether the menu is open where the platform has those properties, however it opened; the icon and the chevron (expand_more or a chevron slot's glyph) SHALL be hidden, and the button with menu SHALL expose no element of its own around them.
SPB-18	THE button with menu SHALL cast the blurred layers of each half's elevation, of its variant and that half's state (comp.button-with-menu.elevated.container.elevation for elevated at rest, and so on), outside that half without clipping them, and draw the elevation's ring inside the half (SPB-26); WHEN the elevation or the colors of a half change between states THE button with menu SHALL animate the change over comp.button-with-menu.motion.state-duration with comp.button-with-menu.motion.state-easing, changing them at once where motion is reduced.
SPB-19	WHEN the layout direction is right-to-left THE button with menu SHALL put the trailing half on the left, mirror the order of the leading half's icon and label and apply its paddings by logical start and end, SHALL present its menu with the end edges aligned at the left (the menu's left edge on the button with menu's left edge, below the trailing half: SPB-15 and MNU-2), SHALL NOT mirror the chevron expand_more or change the way it turns, SHALL leave a glyph of the icon slot or of a chevron slot to the icon helper (SPB-28), and SHALL grow a ripple from the point of contact as in left-to-right.
SPB-20	WHILE label is not empty THE button with menu SHALL expose it as the leading half's accessible name, over a name the product gives it on the element (aria-label or aria-labelledby). WHILE label is empty and the product gives the button with menu a name of its own on the element — aria-label, or aria-labelledby naming an element — THE button with menu SHALL expose that name as the leading half's accessible name. WHILE label is empty and the product gives it none, or menuLabel is empty, THE button with menu SHALL still render, and in debug builds report the half that has no accessible name; WHILE the menu slot holds no item THE button with menu SHALL still emit toggle and draw the trailing half's open form, SHALL present no menu, and in debug builds report the empty menu.
SPB-21	WHILE neither the chevron slot nor the chevron-open slot holds a glyph THE button with menu SHALL draw the icon set's expand_more as the chevron, turned half a turn while open is true; WHILE only the chevron slot holds a glyph THE button with menu SHALL draw that glyph in its place, turned the same way; WHILE the chevron-open slot holds a glyph THE button with menu SHALL draw it unturned while open is true and, while open is false, the chevron slot's glyph (or expand_more when that slot is empty) unturned, and WHEN open changes SHALL cross-fade from one to the other instead of turning. Each slot SHALL hold at most one glyph: the button with menu SHALL draw the first and in debug builds report the rest.
SPB-22	WHERE hoverOpen is true, WHEN a fine pointer (a mouse, a trackpad, or a pen that hovers) enters the trailing half while open is false and stays on it for hoverDelay milliseconds, or for comp.button-with-menu.motion.hover-open-delay when hoverDelay is null, THE button with menu SHALL emit toggle with true once, and WHEN open then becomes true the menu SHALL be open from hover: THE button with menu SHALL present it without moving focus into it (in place of MNU-1's move to the first item), focus staying where it was, and a pointer on an item SHALL render the item hovered without moving focus to it (in place of MNU-8). The pointer leaving the trailing half before the delay has passed, a press on either half, or open becoming true by other means SHALL cancel the wait. Touch, and pointer events a platform synthesises from touch, SHALL never open the menu on hover. WHERE hoverDelay is negative or not a number THE button with menu SHALL wait for comp.button-with-menu.motion.hover-open-delay, and in debug builds report the value.
SPB-23	WHILE the menu is open from hover, WHEN the pointer has been off both the trailing half and the menu's surface for comp.button-with-menu.motion.hover-close-delay THE button with menu SHALL emit toggle with false once and SHALL NOT move focus; a pointer that comes back onto either within that time SHALL keep the menu open, and a press outside both SHALL close it as MNU-5 says. WHILE the menu is open for any other reason (a press, a key, or the product setting open) THE button with menu SHALL NOT close it when the pointer leaves.
SPB-24	WHEN the user activates the trailing half by pointer, touch, Enter, Space or Down Arrow while the menu is open from hover THE button with menu SHALL NOT emit toggle, SHALL keep the menu open and SHALL move focus to its first enabled item as MNU-1 says; from then on the menu SHALL be open as if that activation had opened it: the pointer leaving no longer closes it (SPB-23), MNU-8 applies again, and the next activation of the trailing half emits toggle with false (SPB-2).
SPB-25	WHILE the menu is open from hover, WHEN the user presses Escape or the platform's back, wherever focus is, THE button with menu SHALL emit close once with the reason escape or back, SHALL be closed as SPB-16 says, SHALL NOT move focus, and SHALL keep that key from reaching anything else, so that what hover showed can be dismissed without moving the pointer (WCAG 1.4.13); a later Escape reaches the page as usual.
SPB-26	THE button with menu SHALL draw each half's outline (comp.button-with-menu.outline.width.medium wide at the medium size, and so on, in the outline color of its variant and that half's state) and the ring of its elevation (the layer with no offset, no blur and a positive spread, which the default system gives every level above sys.elevation.level0 and which a platform otherwise draws as a border) inside that half's own edge, the outline over the ring. WHILE its separation is gap neither SHALL reach into the comp.button-with-menu.container.inner-gap between the halves, so that the two halves' edges never meet, however narrow that gap is; WHILE its separation is divider each half SHALL draw neither along the edge where the halves touch, so that the outline and the ring run once around the joined shape and the divider (SPB-31) is the only line on the seam. Only the elevation's blurred layers SHALL fall outside a half (SPB-18).
SPB-27	THE button with menu SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the button with menu is shown THE button with menu SHALL draw itself for the new direction at once, without a motion of its own, keeping its open state and its focus, an open menu placed again by the new direction.
SPB-28	WHERE the layout direction is right-to-left THE button with menu SHALL draw the glyph of its icon slot and a glyph of its chevron or chevron-open slot mirrored left to right exactly when the system's icon set marks that glyph's name as mirrored or the product forces mirroring for that use, and unmirrored when the product forbids it: the icon helper mirrors the glyph inside its own box, about the box's vertical centre line, changing neither its place, size, color and fill nor the order SPB-19 gives. THE button with menu SHALL NOT mirror a glyph itself, and SHALL NOT mirror content the product gives as an image or a view of its own rather than by a glyph's name. The chevron it draws itself (expand_more) is not marked and is never mirrored, and a mirrored chevron-slot glyph is turned while open as an unmirrored one is (SPB-21).
SPB-29	THE button with menu SHALL lay out its label as text of its own direction, isolated from the text around it: each takes the base direction of its first strong character, or the layout direction where it has none, so that a left-to-right word, a number with its sign or unit, a telephone number and an address keep their own order in a right-to-left layout and reorder nothing beside them; THE button with menu SHALL still place the label and align its lines by the layout direction, not by the text's own.
SPB-30	THE button with menu SHALL join its two halves as its separation names: WHILE separation is auto, as comp.button-with-menu.container.separation names, which follows sys.behavior.separation unless a design system sets it apart; WHILE separation is divider or gap, as that value names, whatever the tokens say. Under gap the halves SHALL stand comp.button-with-menu.container.inner-gap apart with nothing drawn between them and the inner corners of SPB-13; under divider the halves SHALL touch, with square inner corners and the divider of SPB-31 on the seam. WHEN separation, or the token it follows, changes THE button with menu SHALL draw the other form at once, without animation, keeping its open state and its focus. A platform that cannot draw a choice SHALL fall back to the first value, divider, and state that in its README.
SPB-31	WHILE its separation is divider THE button with menu SHALL draw on the seam between its halves one line comp.button-with-menu.divider.thickness thick, in the divider color of its variant (comp.button-with-menu.filled.divider.color for filled at rest, and so on), centred on the seam, over the halves' fills and state layers, from comp.button-with-menu.divider.inset below the top of the seam to the same distance above its bottom. The line SHALL take no space of its own, SHALL NOT take a press (a press on it goes to the half under the point), SHALL NOT be exposed to assistive technology, and SHALL keep its resting color while either half is hovered, focused or pressed; WHILE disabled is true it SHALL take the disabled divider color of its variant. A half's state layer, ripple and focus ring SHALL still follow that half's own shape.
SPB-32	THE button with menu SHALL add comp.button-with-menu.container.outer-inset to the leading half's start padding, under either separation and at either trailing width, and to the trailing half's end padding, under either separation and at either trailing width, so that content beside a rounded outer end looks as far from it as from the tighter corner on its other side: the leading half SHALL be wider by that amount with its icon and label moved inward by it, and the trailing half SHALL be wider by that amount with its chevron centred in what is left, half of it nearer the leading half. WHILE trailingWidth is narrow THE trailing half SHALL be as wide as the chevron's box, comp.button-with-menu.trailing.padding-inline-narrow.medium on each side of it (of its own size) and the outer padding, with the chevron centred in what is left: a slim half beside a full end needs the compensation as much as a wide one, its chevron being nearer the curve, so it is one outer padding wider than a narrow icon-only Button of its size (BTN-12) where the two components' tokens agree, as in the default system. In a right-to-left layout the start is the right, as SPB-19 says.
SPB-33	WHERE the component that places the button with menu keeps one Tab stop among its items and makes each half a stop of its own (a toolbar, TBR-25), through the internal channel a Button reads from the component that places it (BTN-10), THE button with menu SHALL let that component say which half, if either, is its Tab stop and move focus to either half, SHALL take the other half out of the Tab order while it does, and SHALL keep each half's own name, role, state, keys and activation. WHILE no component does so THE button with menu SHALL keep both halves in the Tab order, as SPB-17 says. It adds nothing to the public surface: no prop, attribute or styling property says which half is a stop.
SPB-34	WHILE destructive is true THE button with menu SHALL render both halves' containers, label, icon, chevron and outline, and the divider, from the destructive parts of its variant (comp.button-with-menu.filled.destructive.container.color, and so on for each variant), each half in its own state from the destructive parts of that state, and its elevation, shape and opacity as it would without destructive; WHILE destructive is false it SHALL render from the variant's own parts. In every shipped system the destructive parts are those of a destructive Button of the same variant (BTN-40) — filled: the error color with the on-error color on it; tonal: the error container with the on-error-container color on it; elevated and outlined: the variant's own container with the label, the icon and the chevron in the error color, and an outlined half's edge and divider in it too — and disabled they are those of the variant's plain disabled look, so that a disabled destructive button with menu looks like any disabled button with menu of its variant. THE button with menu SHALL NOT pass destructive to the items of its menu: an item is drawn destructive by its own destructive alone (MNU-18), since an option of the menu may delete where the main action does not, and the reverse.
SPB-35	THE button with menu SHALL NOT make color the only sign that its main action is destructive: WHILE destructive is true it SHALL keep both halves' roles, accessible names, states and keyboard behaviour exactly as they are without it, and SHALL expose nothing more to assistive technology on the web, where no role or state says it; WHERE the platform has a destructive role of its own (SwiftUI's ButtonRole.destructive) THE button with menu SHALL give it to the leading half, whose press performs the action, and not to the trailing half, which only opens the menu. Its label says what it destroys.
SPB-36	WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE button with menu SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on the element that carries its role (the leading half carries them) — an id reference by the elements it names in the host's tree or a tree around it, an error message as part of the description while the button with menu is invalid — except those the button with menu owns (aria-haspopup, aria-expanded, aria-controls, aria-disabled), which it SHALL move and not expose. WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE button with menu SHALL take it off that element. WHEN the product sets an aria- attribute the button with menu owns THE button with menu SHALL report it in debug builds.

مطابقة الأسماء بين المنصات

التكافؤ لا يعني واجهات برمجية متطابقة. تعبّر كل منصة عن العقد نفسه بأسلوبها.

المواصفة	Web	SwiftUI	Jetpack Compose	Flutter	React Native
المكوّن	tanrei-button-with-menu	TanreiButtonWithMenu	TanreiButtonWithMenu	TanreiButtonWithMenu	ButtonWithMenu
variant · الخاصية	variant	variant	variant	variant	variant
destructive · الخاصية	destructive	role	destructive	isDestructiveAction	destructive
size · الخاصية	size	size	size	size	size
separation · الخاصية	separation	separation	separation	separation	separation
trailingWidth · الخاصية	trailingWidth	trailingWidth	trailingWidth	trailingWidth	trailingWidth
label · الخاصية	label	title	text	label	label
menuLabel · الخاصية	menuLabel	menuLabel	menuContentDescription	menuSemanticLabel	menuAccessibilityLabel
open · الخاصية	open	isMenuPresented	menuExpanded	menuController	menuVisible
disabled · الخاصية	disabled	disabled	enabled	onPressed	disabled
hoverOpen · الخاصية	hoverOpen	opensOnHover	openOnHover	openOnHover	hoverOpen
hoverDelay · الخاصية	hoverDelay	hoverDelay	hoverDelayMillis	hoverDelay	hoverDelay
click · الحدث	click	action	onClick	onPressed	onPress
toggle · الحدث	toggle	isMenuPresented	onMenuExpandedChange	onMenuToggle	onMenuToggle
close · الحدث	close	isMenuPresented	onMenuDismissRequest	onMenuClose	onMenuDismiss
ملاحظات	<tanrei-button-with-menu label="Save" menu-label="More save options" hover-open hover-delay="400"> with optional glyph elements in slot="icon", slot="chevron" and slot="chevron-open" (the trailing half draws expand_more through the icon helper when both chevron slots are empty), and the menu's item elements (tanrei-menu-item, tanrei-menu-checkbox-item, tanrei-menu-radio-item, tanrei-menu-group) as children with slot="menu", which it forwards into a tanrei-menu in its shadow root. Only the leading half's click reaches listeners on the element; the trailing half fires toggle (a CustomEvent whose detail.open is the value asked for, not the popover's ToggleEvent, which does not leave the shadow root), for a press, a key or a hover alike, and the menu's close fires close with detail.reason. The product sets open from both. hoverDelay is a number of milliseconds; unset (null) takes the token. Hover opening listens for pointerenter / pointerleave with pointerType mouse or pen, and opens the menu through the menu's internal no-focus channel (SPB-22); Escape for a menu open from hover is a capturing keydown on the document. Each half draws its outline as an inside border and its elevation ring as an inset box-shadow layer, the blurred layers staying outside (SPB-26). The trailing half carries aria-haspopup="menu", aria-expanded and aria-controls, and is the menu's focus-return target. separation (auto, divider, gap) and trailing-width (default, narrow) are attributes; auto reads the name in --tanrei-comp-button-with-menu-container-separation. Under divider the halves touch, the rule is drawn over the seam, and neither half draws a border or an inset ring on its inner edge. destructive is a boolean attribute; it draws both halves from the variant's destructive parts, exposes nothing more (SPB-35), and is not passed to the menu's items.	TanreiButtonWithMenu(_ title:, icon:, menuLabel:, isMenuPresented: Binding<Bool>, opensOnHover: Bool = false, hoverDelay: Duration? = nil, action:, chevron:, openChevron:) { TanreiMenuItem … }: the title first, as Button(_:action:); chevron and openChevron are optional glyph builders (the chevron and chevron-open slots); the trailing view builder is the menu's content, presented as TanreiMenu is. The trailing half writes the binding (toggle), and so does the menu when it closes (close); a product that needs the close reason reads the menu's. disabled follows .disabled(_:). Hover uses .onContinuousHover (macOS, and iPadOS with a pointer); a nil hoverDelay takes the token. SwiftUI's Menu(primaryAction:) is not used: neither half can be tokenised. Ships the previous revision today (6 px corners, a fixed turning chevron, no hover opening); the rest is owed, including a check of SPB-26 on this platform. Also owed: the component's current name, separation and trailingWidth, the divider (SPB-31), the outer padding (SPB-32), a trailing half that keeps its shape while open (SPB-13), the tighter padding beside the icon, and the new fixtures; reading comp.button-with-menu.container.separation as a typed choice needs the native token emitters to write a component's choice of kind as a typed enumeration, which they do not yet. Not built on this platform yet: role: ButtonRole? = nil, as SwiftUI's own Button(role:) takes it: .destructive is destructive (SPB-34), and the role is given to the leading half alone (SPB-35).	TanreiButtonWithMenu(text, onClick, menuContentDescription, menuExpanded, onMenuExpandedChange, onMenuDismissRequest, variant, size, enabled, icon, chevron, openChevron, openOnHover = false, hoverDelayMillis: Long? = null) { TanreiMenuItem(…) }: chevron and openChevron are optional glyph lambdas (the chevron and chevron-open slots); the content lambda is the menu's, shown in the TanreiMenu popup. State hoisting: the caller keeps menuExpanded, sets it from onMenuExpandedChange (a press, a key or a hover) and to false from onMenuDismissRequest, which carries the reason. Hover reads PointerEventType.Enter / Exit for PointerType.Mouse and Stylus only; a null delay takes the token. The trailing half is Role.Button with a content description, and its expanded state as expand / collapse semantics actions. enabled is the inverse flag. Ships the previous revision today (6 px corners, a fixed turning chevron, no hover opening); the rest is owed, including a check of SPB-26 on this platform. Also owed: the component's current name, separation and trailingWidth, the divider (SPB-31), the outer padding (SPB-32), a trailing half that keeps its shape while open (SPB-13), the tighter padding beside the icon, and the new fixtures; reading comp.button-with-menu.container.separation as a typed choice needs the native token emitters to write a component's choice of kind as a typed enumeration, which they do not yet. Not built on this platform yet: destructive: Boolean = false (SPB-34); Compose has no destructive role, so it draws and adds no semantics (SPB-35).	TanreiButtonWithMenu(label:, icon:, chevron:, openChevron:, menuSemanticLabel:, onPressed:, menuController:, menuChildren: [TanreiMenuItem(…)], onMenuToggle:, onMenuClose:, openOnHover: false, hoverDelay: null, variant:, size:), built with the widgets library: chevron and openChevron are optional glyph widgets (the chevron and chevron-open slots); menuChildren are the menu's items, shown through TanreiMenuAnchor. The controller is a TanreiMenuController (the Tanrei menu's own), passed or created internally; it is open, so the button with menu opens and closes the menu itself; onMenuToggle and onMenuClose report it. Hover uses a MouseRegion and ignores PointerDeviceKind.touch; hoverDelay is a Duration?, null taking the token. A null onPressed disables it. Ships the previous revision today (6 px corners, a fixed turning chevron, no hover opening); the rest is owed, including a check of SPB-26 on this platform. Also owed: the component's current name, separation and trailingWidth, the divider (SPB-31), the outer padding (SPB-32), a trailing half that keeps its shape while open (SPB-13), the tighter padding beside the icon, and the new fixtures; reading comp.button-with-menu.container.separation as a typed choice needs the native token emitters to write a component's choice of kind as a typed enumeration, which they do not yet. Not built on this platform yet: isDestructiveAction: false, the widgets library's name for it (SPB-34); it draws and adds no semantics (SPB-35).	<ButtonWithMenu label icon chevron openChevron menuAccessibilityLabel menuVisible hoverOpen hoverDelay onPress onMenuToggle onMenuDismiss menuItems={[…]} variant size>: chevron and openChevron are optional glyph names (the chevron and chevron-open slots); menuItems is the Menu's items array (the union of its four kinds), shown by a Menu on the overlay layer that TanreiProvider renders. Controlled: the caller sets menuVisible from onMenuToggle and to false from onMenuDismiss, which carries the reason. Hover uses Pressable's onHoverIn / onHoverOut, which fire only for a pointer (iPadOS, Android with a mouse, web); hoverDelay is in milliseconds, undefined taking the token. The trailing half has the button role with accessibilityState.expanded. Ships the previous revision today (6 px corners, a fixed turning chevron, no hover opening); the rest is owed, including a check of SPB-26 on this platform. Also owed: the component's current name, separation and trailingWidth, the divider (SPB-31), the outer padding (SPB-32), a trailing half that keeps its shape while open (SPB-13), the tighter padding beside the icon, and the new fixtures; reading comp.button-with-menu.container.separation as a typed choice needs the native token emitters to write a component's choice of kind as a typed enumeration, which they do not yet. Not built on this platform yet: destructive (SPB-34); it draws and adds no accessibility props (SPB-35).

الرموز

الرمز	يشير إلى	القيمة المحلولة (فاتح)
--tanrei-comp-button-with-menu-container-gap-large	sys.space.space100	8px
--tanrei-comp-button-with-menu-container-gap-medium	sys.space.space100	8px
--tanrei-comp-button-with-menu-container-gap-small	sys.space.space100	8px
--tanrei-comp-button-with-menu-container-height-large	—	56px
--tanrei-comp-button-with-menu-container-height-medium	—	40px
--tanrei-comp-button-with-menu-container-height-small	—	32px
--tanrei-comp-button-with-menu-container-inner-gap	sys.space.space25	2px
--tanrei-comp-button-with-menu-container-inner-shape	sys.shape.corner.small	6px
--tanrei-comp-button-with-menu-container-inner-shape-open	comp.button-with-menu.container.inner-shape	6px
--tanrei-comp-button-with-menu-container-outer-inset	sys.space.space50	4px
--tanrei-comp-button-with-menu-container-padding-block-large	—	6px
--tanrei-comp-button-with-menu-container-padding-block-medium	—	6px
--tanrei-comp-button-with-menu-container-padding-block-small	—	6px
--tanrei-comp-button-with-menu-container-separation	sys.behavior.separation	0
--tanrei-comp-button-with-menu-container-shape	sys.shape.corner.full	9999px
--tanrei-comp-button-with-menu-disabled-container-shape	—	9999px
--tanrei-comp-button-with-menu-disabled-opacity	—	1
--tanrei-comp-button-with-menu-divider-inset	sys.space.space100	8px
--tanrei-comp-button-with-menu-divider-thickness	sys.border.hairline	1px
--tanrei-comp-button-with-menu-elevated-container-color	sys.color.surface-container-lowest	#ffffff
--tanrei-comp-button-with-menu-elevated-container-elevation	sys.elevation.level2	0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(0 0 0 / 0.04)
--tanrei-comp-button-with-menu-elevated-destructive-container-color	comp.button.elevated.destructive.container.color	#ffffff
--tanrei-comp-button-with-menu-elevated-destructive-divider-color	comp.button-with-menu.elevated.divider.color	#000000 · 8%
--tanrei-comp-button-with-menu-elevated-destructive-label-color	comp.button.elevated.destructive.label.color	#cd262f
--tanrei-comp-button-with-menu-elevated-destructive-outline-color	comp.button.elevated.destructive.outline.color	#000000 · 0%
--tanrei-comp-button-with-menu-elevated-destructive-state-layer-color	comp.button-with-menu.elevated.destructive.label.color	#cd262f
--tanrei-comp-button-with-menu-elevated-disabled-container-color	—	#1b1b1b · 12%
--tanrei-comp-button-with-menu-elevated-disabled-container-elevation	—
--tanrei-comp-button-with-menu-elevated-disabled-destructive-container-color	—	#1b1b1b · 12%
--tanrei-comp-button-with-menu-elevated-disabled-destructive-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-elevated-disabled-destructive-label-color	—	#1b1b1b · 38%
--tanrei-comp-button-with-menu-elevated-disabled-destructive-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-elevated-disabled-destructive-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-button-with-menu-elevated-disabled-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-elevated-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-button-with-menu-elevated-disabled-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-elevated-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-button-with-menu-elevated-divider-color	sys.color.outline-variant	#000000 · 8%
--tanrei-comp-button-with-menu-elevated-focused-container-color	—	#e8e8e8
--tanrei-comp-button-with-menu-elevated-focused-container-elevation	—	0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(0 0 0 / 0.04)
--tanrei-comp-button-with-menu-elevated-focused-destructive-container-color	—	#fae9ea
--tanrei-comp-button-with-menu-elevated-focused-destructive-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-elevated-focused-destructive-label-color	—	#cd262f
--tanrei-comp-button-with-menu-elevated-focused-destructive-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-elevated-focused-destructive-state-layer-color	—	#cd262f
--tanrei-comp-button-with-menu-elevated-focused-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-elevated-focused-label-color	—	#1b1b1b
--tanrei-comp-button-with-menu-elevated-focused-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-elevated-focused-state-layer-color	—	#1b1b1b
--tanrei-comp-button-with-menu-elevated-hovered-container-color	—	#ededed
--tanrei-comp-button-with-menu-elevated-hovered-container-elevation	—	0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(0 0 0 / 0.04)
--tanrei-comp-button-with-menu-elevated-hovered-destructive-container-color	—	#fbeeee
--tanrei-comp-button-with-menu-elevated-hovered-destructive-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-elevated-hovered-destructive-label-color	—	#cd262f
--tanrei-comp-button-with-menu-elevated-hovered-destructive-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-elevated-hovered-destructive-state-layer-color	—	#cd262f
--tanrei-comp-button-with-menu-elevated-hovered-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-elevated-hovered-label-color	—	#1b1b1b
--tanrei-comp-button-with-menu-elevated-hovered-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-elevated-hovered-state-layer-color	—	#1b1b1b
--tanrei-comp-button-with-menu-elevated-label-color	sys.color.on-surface	#1b1b1b
--tanrei-comp-button-with-menu-elevated-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-elevated-pressed-container-color	—	#e8e8e8
--tanrei-comp-button-with-menu-elevated-pressed-container-elevation	—	0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(0 0 0 / 0.04)
--tanrei-comp-button-with-menu-elevated-pressed-destructive-container-color	—	#fae9ea
--tanrei-comp-button-with-menu-elevated-pressed-destructive-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-elevated-pressed-destructive-label-color	—	#cd262f
--tanrei-comp-button-with-menu-elevated-pressed-destructive-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-elevated-pressed-destructive-state-layer-color	—	#cd262f
--tanrei-comp-button-with-menu-elevated-pressed-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-elevated-pressed-label-color	—	#1b1b1b
--tanrei-comp-button-with-menu-elevated-pressed-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-elevated-pressed-state-layer-color	—	#1b1b1b
--tanrei-comp-button-with-menu-elevated-state-layer-color	comp.button-with-menu.elevated.label.color	#1b1b1b
--tanrei-comp-button-with-menu-filled-container-color	sys.color.primary	#1b1b1b
--tanrei-comp-button-with-menu-filled-container-elevation	sys.elevation.level0
--tanrei-comp-button-with-menu-filled-destructive-container-color	comp.button.filled.destructive.container.color	#cd262f
--tanrei-comp-button-with-menu-filled-destructive-divider-color	comp.button-with-menu.filled.divider.color	#848484
--tanrei-comp-button-with-menu-filled-destructive-label-color	comp.button.filled.destructive.label.color	#ffffff
--tanrei-comp-button-with-menu-filled-destructive-outline-color	comp.button.filled.destructive.outline.color	#000000 · 0%
--tanrei-comp-button-with-menu-filled-destructive-state-layer-color	comp.button-with-menu.filled.destructive.label.color	#ffffff
--tanrei-comp-button-with-menu-filled-disabled-container-color	—	#1b1b1b · 12%
--tanrei-comp-button-with-menu-filled-disabled-container-elevation	—
--tanrei-comp-button-with-menu-filled-disabled-destructive-container-color	—	#1b1b1b · 12%
--tanrei-comp-button-with-menu-filled-disabled-destructive-divider-color	—	#1b1b1b · 38%
--tanrei-comp-button-with-menu-filled-disabled-destructive-label-color	—	#1b1b1b · 38%
--tanrei-comp-button-with-menu-filled-disabled-destructive-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-filled-disabled-destructive-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-button-with-menu-filled-disabled-divider-color	—	#1b1b1b · 38%
--tanrei-comp-button-with-menu-filled-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-button-with-menu-filled-disabled-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-filled-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-button-with-menu-filled-divider-color	sys.color.outline	#848484
--tanrei-comp-button-with-menu-filled-focused-container-color	—	#323232
--tanrei-comp-button-with-menu-filled-focused-container-elevation	—
--tanrei-comp-button-with-menu-filled-focused-destructive-container-color	—	#d23c44
--tanrei-comp-button-with-menu-filled-focused-destructive-divider-color	—	#848484
--tanrei-comp-button-with-menu-filled-focused-destructive-label-color	—	#ffffff
--tanrei-comp-button-with-menu-filled-focused-destructive-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-filled-focused-destructive-state-layer-color	—	#ffffff
--tanrei-comp-button-with-menu-filled-focused-divider-color	—	#848484
--tanrei-comp-button-with-menu-filled-focused-label-color	—	#ffffff
--tanrei-comp-button-with-menu-filled-focused-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-filled-focused-state-layer-color	—	#ffffff
--tanrei-comp-button-with-menu-filled-hovered-container-color	—	#2d2d2d
--tanrei-comp-button-with-menu-filled-hovered-container-elevation	—
--tanrei-comp-button-with-menu-filled-hovered-destructive-container-color	—	#d13740
--tanrei-comp-button-with-menu-filled-hovered-destructive-divider-color	—	#848484
--tanrei-comp-button-with-menu-filled-hovered-destructive-label-color	—	#ffffff
--tanrei-comp-button-with-menu-filled-hovered-destructive-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-filled-hovered-destructive-state-layer-color	—	#ffffff
--tanrei-comp-button-with-menu-filled-hovered-divider-color	—	#848484
--tanrei-comp-button-with-menu-filled-hovered-label-color	—	#ffffff
--tanrei-comp-button-with-menu-filled-hovered-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-filled-hovered-state-layer-color	—	#ffffff
--tanrei-comp-button-with-menu-filled-label-color	sys.color.on-primary	#ffffff
--tanrei-comp-button-with-menu-filled-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-filled-pressed-container-color	—	#323232
--tanrei-comp-button-with-menu-filled-pressed-container-elevation	—
--tanrei-comp-button-with-menu-filled-pressed-destructive-container-color	—	#d23c44
--tanrei-comp-button-with-menu-filled-pressed-destructive-divider-color	—	#848484
--tanrei-comp-button-with-menu-filled-pressed-destructive-label-color	—	#ffffff
--tanrei-comp-button-with-menu-filled-pressed-destructive-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-filled-pressed-destructive-state-layer-color	—	#ffffff
--tanrei-comp-button-with-menu-filled-pressed-divider-color	—	#848484
--tanrei-comp-button-with-menu-filled-pressed-label-color	—	#ffffff
--tanrei-comp-button-with-menu-filled-pressed-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-filled-pressed-state-layer-color	—	#ffffff
--tanrei-comp-button-with-menu-filled-state-layer-color	comp.button-with-menu.filled.label.color	#ffffff
--tanrei-comp-button-with-menu-focused-container-shape	—	9999px
--tanrei-comp-button-with-menu-focused-opacity	—	1
--tanrei-comp-button-with-menu-hovered-container-shape	—	9999px
--tanrei-comp-button-with-menu-hovered-opacity	—	1
--tanrei-comp-button-with-menu-icon-size-large	sys.icon.medium	24px
--tanrei-comp-button-with-menu-icon-size-medium	sys.icon.medium	24px
--tanrei-comp-button-with-menu-icon-size-small	sys.icon.small	20px
--tanrei-comp-button-with-menu-leading-padding-inline-end-large	sys.space.space300	24px
--tanrei-comp-button-with-menu-leading-padding-inline-end-medium	sys.space.space200	16px
--tanrei-comp-button-with-menu-leading-padding-inline-end-small	sys.space.space200	16px
--tanrei-comp-button-with-menu-leading-padding-inline-start-with-icon-large	sys.space.space200	16px
--tanrei-comp-button-with-menu-leading-padding-inline-start-with-icon-medium	sys.space.space150	12px
--tanrei-comp-button-with-menu-leading-padding-inline-start-with-icon-small	sys.space.space150	12px
--tanrei-comp-button-with-menu-leading-padding-inline-start-large	sys.space.space300	24px
--tanrei-comp-button-with-menu-leading-padding-inline-start-medium	sys.space.space200	16px
--tanrei-comp-button-with-menu-leading-padding-inline-start-small	sys.space.space200	16px
--tanrei-comp-button-with-menu-motion-feedback-duration	sys.motion.role.feedback	450ms
--tanrei-comp-button-with-menu-motion-hover-close-delay	sys.motion.duration.medium2	300ms
--tanrei-comp-button-with-menu-motion-hover-open-delay	sys.motion.duration.medium2	300ms
--tanrei-comp-button-with-menu-motion-open-duration	sys.motion.role.appear.anchored.enter	300ms
--tanrei-comp-button-with-menu-motion-open-easing	sys.motion.easing.spatial	cubic-bezier(0.2, 0, 0, 1)
--tanrei-comp-button-with-menu-motion-state-duration	sys.motion.role.state.default	250ms
--tanrei-comp-button-with-menu-motion-state-easing	sys.motion.easing.state	cubic-bezier(0.2, 0, 0, 1)
--tanrei-comp-button-with-menu-outline-width-large	sys.border.hairline	1px
--tanrei-comp-button-with-menu-outline-width-medium	sys.border.hairline	1px
--tanrei-comp-button-with-menu-outline-width-small	sys.border.hairline	1px
--tanrei-comp-button-with-menu-outlined-container-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-outlined-container-elevation	sys.elevation.level0
--tanrei-comp-button-with-menu-outlined-destructive-container-color	comp.button.outlined.destructive.container.color	#000000 · 0%
--tanrei-comp-button-with-menu-outlined-destructive-divider-color	comp.button-with-menu.outlined.destructive.outline.color	#cd262f
--tanrei-comp-button-with-menu-outlined-destructive-label-color	comp.button.outlined.destructive.label.color	#cd262f
--tanrei-comp-button-with-menu-outlined-destructive-outline-color	comp.button.outlined.destructive.outline.color	#cd262f
--tanrei-comp-button-with-menu-outlined-destructive-state-layer-color	comp.button-with-menu.outlined.destructive.label.color	#cd262f
--tanrei-comp-button-with-menu-outlined-disabled-container-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-outlined-disabled-container-elevation	—
--tanrei-comp-button-with-menu-outlined-disabled-destructive-container-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-outlined-disabled-destructive-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-outlined-disabled-destructive-label-color	—	#1b1b1b · 38%
--tanrei-comp-button-with-menu-outlined-disabled-destructive-outline-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-outlined-disabled-destructive-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-button-with-menu-outlined-disabled-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-outlined-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-button-with-menu-outlined-disabled-outline-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-outlined-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-button-with-menu-outlined-divider-color	comp.button-with-menu.outlined.outline.color	#000000 · 8%
--tanrei-comp-button-with-menu-outlined-focused-container-color	—	#1b1b1b · 10%
--tanrei-comp-button-with-menu-outlined-focused-container-elevation	—
--tanrei-comp-button-with-menu-outlined-focused-destructive-container-color	—	#cd262f · 10%
--tanrei-comp-button-with-menu-outlined-focused-destructive-divider-color	—	#cd262f
--tanrei-comp-button-with-menu-outlined-focused-destructive-label-color	—	#cd262f
--tanrei-comp-button-with-menu-outlined-focused-destructive-outline-color	—	#cd262f
--tanrei-comp-button-with-menu-outlined-focused-destructive-state-layer-color	—	#cd262f
--tanrei-comp-button-with-menu-outlined-focused-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-outlined-focused-label-color	—	#1b1b1b
--tanrei-comp-button-with-menu-outlined-focused-outline-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-outlined-focused-state-layer-color	—	#1b1b1b
--tanrei-comp-button-with-menu-outlined-hovered-container-color	—	#1b1b1b · 8%
--tanrei-comp-button-with-menu-outlined-hovered-container-elevation	—
--tanrei-comp-button-with-menu-outlined-hovered-destructive-container-color	—	#cd262f · 8%
--tanrei-comp-button-with-menu-outlined-hovered-destructive-divider-color	—	#cd262f
--tanrei-comp-button-with-menu-outlined-hovered-destructive-label-color	—	#cd262f
--tanrei-comp-button-with-menu-outlined-hovered-destructive-outline-color	—	#cd262f
--tanrei-comp-button-with-menu-outlined-hovered-destructive-state-layer-color	—	#cd262f
--tanrei-comp-button-with-menu-outlined-hovered-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-outlined-hovered-label-color	—	#1b1b1b
--tanrei-comp-button-with-menu-outlined-hovered-outline-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-outlined-hovered-state-layer-color	—	#1b1b1b
--tanrei-comp-button-with-menu-outlined-label-color	sys.color.on-surface	#1b1b1b
--tanrei-comp-button-with-menu-outlined-outline-color	sys.color.outline-variant	#000000 · 8%
--tanrei-comp-button-with-menu-outlined-pressed-container-color	—	#1b1b1b · 10%
--tanrei-comp-button-with-menu-outlined-pressed-container-elevation	—
--tanrei-comp-button-with-menu-outlined-pressed-destructive-container-color	—	#cd262f · 10%
--tanrei-comp-button-with-menu-outlined-pressed-destructive-divider-color	—	#cd262f
--tanrei-comp-button-with-menu-outlined-pressed-destructive-label-color	—	#cd262f
--tanrei-comp-button-with-menu-outlined-pressed-destructive-outline-color	—	#cd262f
--tanrei-comp-button-with-menu-outlined-pressed-destructive-state-layer-color	—	#cd262f
--tanrei-comp-button-with-menu-outlined-pressed-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-outlined-pressed-label-color	—	#1b1b1b
--tanrei-comp-button-with-menu-outlined-pressed-outline-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-outlined-pressed-state-layer-color	—	#1b1b1b
--tanrei-comp-button-with-menu-outlined-state-layer-color	comp.button-with-menu.outlined.label.color	#1b1b1b
--tanrei-comp-button-with-menu-pressed-container-shape	—	9999px
--tanrei-comp-button-with-menu-pressed-opacity	—	1
--tanrei-comp-button-with-menu-tonal-container-color	sys.color.secondary-container	#eeeeee
--tanrei-comp-button-with-menu-tonal-container-elevation	sys.elevation.level0
--tanrei-comp-button-with-menu-tonal-destructive-container-color	comp.button.tonal.destructive.container.color	#ffedeb
--tanrei-comp-button-with-menu-tonal-destructive-divider-color	comp.button-with-menu.tonal.divider.color	#000000 · 8%
--tanrei-comp-button-with-menu-tonal-destructive-label-color	comp.button.tonal.destructive.label.color	#3a211f
--tanrei-comp-button-with-menu-tonal-destructive-outline-color	comp.button.tonal.destructive.outline.color	#000000 · 0%
--tanrei-comp-button-with-menu-tonal-destructive-state-layer-color	comp.button-with-menu.tonal.destructive.label.color	#3a211f
--tanrei-comp-button-with-menu-tonal-disabled-container-color	—	#1b1b1b · 12%
--tanrei-comp-button-with-menu-tonal-disabled-container-elevation	—
--tanrei-comp-button-with-menu-tonal-disabled-destructive-container-color	—	#1b1b1b · 12%
--tanrei-comp-button-with-menu-tonal-disabled-destructive-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-tonal-disabled-destructive-label-color	—	#1b1b1b · 38%
--tanrei-comp-button-with-menu-tonal-disabled-destructive-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-tonal-disabled-destructive-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-button-with-menu-tonal-disabled-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-tonal-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-button-with-menu-tonal-disabled-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-tonal-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-button-with-menu-tonal-divider-color	sys.color.outline-variant	#000000 · 8%
--tanrei-comp-button-with-menu-tonal-focused-container-color	—	#dadada
--tanrei-comp-button-with-menu-tonal-focused-container-elevation	—
--tanrei-comp-button-with-menu-tonal-focused-destructive-container-color	—	#ebd9d7
--tanrei-comp-button-with-menu-tonal-focused-destructive-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-tonal-focused-destructive-label-color	—	#3a211f
--tanrei-comp-button-with-menu-tonal-focused-destructive-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-tonal-focused-destructive-state-layer-color	—	#3a211f
--tanrei-comp-button-with-menu-tonal-focused-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-tonal-focused-label-color	—	#262626
--tanrei-comp-button-with-menu-tonal-focused-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-tonal-focused-state-layer-color	—	#262626
--tanrei-comp-button-with-menu-tonal-hovered-container-color	—	#dedede
--tanrei-comp-button-with-menu-tonal-hovered-container-elevation	—
--tanrei-comp-button-with-menu-tonal-hovered-destructive-container-color	—	#efdddb
--tanrei-comp-button-with-menu-tonal-hovered-destructive-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-tonal-hovered-destructive-label-color	—	#3a211f
--tanrei-comp-button-with-menu-tonal-hovered-destructive-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-tonal-hovered-destructive-state-layer-color	—	#3a211f
--tanrei-comp-button-with-menu-tonal-hovered-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-tonal-hovered-label-color	—	#262626
--tanrei-comp-button-with-menu-tonal-hovered-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-tonal-hovered-state-layer-color	—	#262626
--tanrei-comp-button-with-menu-tonal-label-color	sys.color.on-secondary-container	#262626
--tanrei-comp-button-with-menu-tonal-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-tonal-pressed-container-color	—	#dadada
--tanrei-comp-button-with-menu-tonal-pressed-container-elevation	—
--tanrei-comp-button-with-menu-tonal-pressed-destructive-container-color	—	#ebd9d7
--tanrei-comp-button-with-menu-tonal-pressed-destructive-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-tonal-pressed-destructive-label-color	—	#3a211f
--tanrei-comp-button-with-menu-tonal-pressed-destructive-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-tonal-pressed-destructive-state-layer-color	—	#3a211f
--tanrei-comp-button-with-menu-tonal-pressed-divider-color	—	#000000 · 8%
--tanrei-comp-button-with-menu-tonal-pressed-label-color	—	#262626
--tanrei-comp-button-with-menu-tonal-pressed-outline-color	—	#000000 · 0%
--tanrei-comp-button-with-menu-tonal-pressed-state-layer-color	—	#262626
--tanrei-comp-button-with-menu-tonal-state-layer-color	comp.button-with-menu.tonal.label.color	#262626
--tanrei-comp-button-with-menu-trailing-padding-inline-narrow-large	sys.space.space50	4px
--tanrei-comp-button-with-menu-trailing-padding-inline-narrow-medium	sys.space.space50	4px
--tanrei-comp-button-with-menu-trailing-padding-inline-narrow-small	sys.space.space50	4px
--tanrei-comp-button-with-menu-trailing-padding-inline-large	sys.space.space200	16px
--tanrei-comp-button-with-menu-trailing-padding-inline-medium	sys.space.space100	8px
--tanrei-comp-button-with-menu-trailing-padding-inline-small	sys.space.space75	6px
--tanrei-comp-button-with-menu-label-typescale-large	sys.typescale.label	500 14px/1.4286
--tanrei-comp-button-with-menu-label-typescale-medium	sys.typescale.label	500 14px/1.4286
--tanrei-comp-button-with-menu-label-typescale-small	sys.typescale.label	500 14px/1.4286

نماذج الاختبار

عروض مرجعية. تلتقط كل المنصات لقطة لكل نموذج بالمعرّف نفسه حتى يمكن مقارنة النتائج.

variant: filled (27)

filled-medium

variant: filled label: Save menuLabel: More save options

filled-small

variant: filled size: small label: Save menuLabel: More save options

filled-large

variant: filled size: large label: Save menuLabel: More save options

filled-icon

variant: filled label: Save menuLabel: More save options slots: icon

filled-icon-small

variant: filled size: small label: Save menuLabel: More save options slots: icon

filled-icon-large

variant: filled size: large label: Save menuLabel: More save options slots: icon

filled-open

variant: filled label: Save menuLabel: More save options open: true مرسوم وحده في نافذة بحجم 352 × 128

filled-disabled

variant: filled label: Save menuLabel: More save options disabled: true

filled-chevron-custom

variant: filled label: Share menuLabel: More share options slots: chevron, chevron-open

filled-chevron-custom-open

variant: filled label: Share menuLabel: More share options open: true slots: chevron, chevron-open مرسوم وحده في نافذة بحجم 352 × 128

filled-chevron-turned-open

variant: filled label: Save menuLabel: More save options open: true slots: chevron مرسوم وحده في نافذة بحجم 352 × 128

filled-opens-on-hover

variant: filled label: Save menuLabel: More save options hoverOpen: true hoverDelay: 500

filled-divider

variant: filled separation: divider label: Save menuLabel: More save options

filled-gap

variant: filled separation: gap label: Save menuLabel: More save options

filled-gap-open

variant: filled separation: gap label: Save menuLabel: More save options open: true مرسوم وحده في نافذة بحجم 352 × 128

filled-gap-disabled

variant: filled separation: gap label: Save menuLabel: More save options disabled: true

filled-narrow

variant: filled trailingWidth: narrow label: Save menuLabel: More save options

filled-narrow-small

variant: filled size: small trailingWidth: narrow label: Save menuLabel: More save options

filled-narrow-large

variant: filled size: large trailingWidth: narrow label: Save menuLabel: More save options

filled-gap-narrow

variant: filled separation: gap trailingWidth: narrow label: Save menuLabel: More save options

filled-narrow-open

variant: filled trailingWidth: narrow label: Save menuLabel: More save options open: true مرسوم وحده في نافذة بحجم 352 × 128

filled-narrow-rtl

variant: filled trailingWidth: narrow label: Save menuLabel: More save options direction: rtl

filled-destructive

variant: filled destructive: true label: Delete menuLabel: More delete options

filled-destructive-gap

variant: filled destructive: true separation: gap label: Delete menuLabel: More delete options

filled-destructive-narrow

variant: filled destructive: true trailingWidth: narrow label: Delete menuLabel: More delete options

filled-destructive-disabled

variant: filled destructive: true label: Delete menuLabel: More delete options disabled: true

filled-destructive-open

variant: filled destructive: true label: Delete menuLabel: More delete options open: true مرسوم وحده في نافذة بحجم 352 × 128

variant: tonal (3)

tonal-medium

variant: tonal label: Save menuLabel: More save options

tonal-gap

variant: tonal separation: gap label: Save menuLabel: More save options

tonal-destructive

variant: tonal destructive: true label: Delete menuLabel: More delete options

variant: elevated (5)

elevated-medium

variant: elevated label: Save menuLabel: More save options

elevated-open

variant: elevated label: Save menuLabel: More save options open: true مرسوم وحده في نافذة بحجم 352 × 128

elevated-gap

variant: elevated separation: gap label: Save menuLabel: More save options

elevated-gap-open

variant: elevated separation: gap label: Save menuLabel: More save options open: true مرسوم وحده في نافذة بحجم 352 × 128

elevated-destructive

variant: elevated destructive: true label: Delete menuLabel: More delete options

variant: outlined (7)

outlined-medium

variant: outlined label: Save menuLabel: More save options

outlined-open

variant: outlined label: Save menuLabel: More save options open: true مرسوم وحده في نافذة بحجم 352 × 128

outlined-disabled

variant: outlined label: Save menuLabel: More save options disabled: true

outlined-gap

variant: outlined separation: gap label: Save menuLabel: More save options

outlined-narrow

variant: outlined trailingWidth: narrow label: Save menuLabel: More save options

outlined-gap-narrow

variant: outlined separation: gap trailingWidth: narrow label: Save menuLabel: More save options

outlined-destructive

variant: outlined destructive: true label: Delete menuLabel: More delete options

مولَّد من specs/button-with-menu.spec.json, tokens/comp/button-with-menu.tokens.json, design/tokens/

الإرشادات

link

متى يُستخدم

link

استخدم الزر مع قائمة لإجراء له هيئة معتادة وبضع تنويعات: «حفظ» و«حفظ باسم…»، و«دمج» و«ضغط ودمج»، و«إرسال» و«جدولة الإرسال». الهيئة المعتادة تحتاج إلى ضغطة واحدة، والتنويعات تبقى على بعد ضغطة أخرى.

إن لم يكن أي من الخيارات هو المعتاد بوضوح، فاستخدم زرًّا أو زر أيقونة يفتح قائمة خيارات. وإن لم تكن هناك تنويعات، فاستخدم زرًّا عاديًّا. ولمجموعة من الإجراءات المنفصلة جنبًا إلى جنب، استخدم مجموعة أزرار.

اختيار الطراز

link

تحمل الطُرُز (variants) التوكيد نفسه الذي تحمله طُرُز Button، وتنطبق الميزانية نفسها: إجراء قوي واحد في كل عرض.

الطراز	التوكيد	يُستخدم لـ
Filled (الافتراضي)	الأعلى	الإجراء الرئيسي في عرض.
Tonal	عالٍ	إجراء مهم لا ينبغي أن ينافس زرًّا من الطراز filled.
Elevated	متوسط	زر مع قائمة فوق خلفية مزدحمة أو منقوشة.
Outlined	متوسط	إجراء ثانوي بجانب زر من الطراز filled.

لا وجود للطراز text. فمن دون تعبئة أو حدّ لن يدلّ شيء على موضع التقاء النصفين، وسيختفي الانقسام.

للأحجام ارتفاعات Button نفسها، فيستطيع الزر مع قائمة أن يشارك أزرارًا من الحجم نفسه صفًّا واحدًا. الطرفان الخارجيان مستديران تمامًا في النظام الافتراضي. وموضع التقاء النصفين يتوقف على الفصل: مع الفاصل يتلامسان عند زوايا مربّعة وعلى موضع الوصل خط، ولا يرسم أي من النصفين حدّه على امتداده، فيكون حدّ الزر مع قائمة من الطراز outlined خطًّا واحدًا من كل الجهات؛ ومع الفجوة يرسم كل نصف حدّه، والحلقة التي للسطح المرتفع، داخل حافته الخاصة، فلا يتلامس الاثنان أبدًا.

السهم الصغير

link

يرسم نصف النهاية الرسم expand_more من مجموعة الأيقونات ويديره نصف دورة ما دامت القائمة مفتوحة. في النظام الافتراضي يحتفظ نصف النهاية بشكله وهو مفتوح، فالسهم الصغير وحده يُظهر حالة الفتح. ويستطيع نظام تصميم أن يعطي النصف المفتوح زوايا داخلية خاصة به: الإعدادات الجاهزة m3-like تجعله دائرة وهو مفتوح.

منفذان يغيّران رسم الأيقونة (glyph). كل منهما يأخذ رسمًا واحدًا من مجموعة الأيقونات:

المنافذ التي تملؤها	مغلقة	مفتوحة
لا هذا ولا ذاك	expand_more	expand_more، مُدارًا
chevron فقط	رسمك	رسمك، مُدارًا
chevron-open (مع chevron أو من دونه)	رسم المنفذ chevron، أو expand_more	رسم المنفذ chevron-open؛ يتلاشى أحدهما في الآخر بدل الدوران

الرسم الذي لا اتجاه له، مثل more_vert، لا ينبغي أن يدور: أرفِقه برسم في المنفذ chevron-open، أو ضع الرسم نفسه في المنفذين.

الفتح عند التحويم

link

مع الخاصية hoverOpen تُفتح القائمة أيضًا حين تستقر فأرة أو لوحة لمس أو قلم يحوم على نصف النهاية مدةً قدرها hoverDelay ميلي ثانية. اترك hoverDelay بلا ضبط لتأخذ مهلة النظام، وهي 300 ms في النظام الافتراضي. الضغط ولوحة المفاتيح يفتحان القائمة كما كانا، واللمس لا يفتحها عند التحويم أبدًا.

• القائمة المفتوحة بالتحويم لا تأخذ التركيز: يبقى التركيز حيث كان الشخص، في حقل نص مثلًا. والعناصر تُظهر التحويم مع ذلك، والنقر على أحدها يفعّله.
• تُغلق حين يكون المؤشر قد ابتعد عن نصف النهاية وعن القائمة معًا مهلة قصيرة، فيستطيع المؤشر أن يعبر إلى القائمة أو أن ينزلق عن حافة ثم يعود. والقائمة المفتوحة بأي طريقة أخرى لا تُغلق أبدًا حين يغادر المؤشر.
• إذا ضُغط نصف النهاية، أو ضُغط مفتاح عليه، والقائمة المفتوحة بالتحويم ظاهرة، بقيت مفتوحة وانتقل التركيز إليها. ومنذ تلك اللحظة هي قائمة مفتوحة بضغطة: الضغطة التالية تغلقها.
• المفتاح Escape يغلق القائمة المفتوحة بالتحويم أينما كان التركيز.
• التحويم يطلب عبر حدث التبديل نفسه الذي تطلب به الضغطة، فالشيفرة التي تضبط open لا تحتاج إلى تغيير.

استخدم الفتح عند التحويم حيث يشيع المؤشر وتكون القائمة التي تظهر من تلقاء نفسها مرحَّبًا بها، كشريط أدوات في محرر على سطح المكتب. وهو لا يغني أبدًا عن الضغط.

قائمة الخيارات

link

• القائمة هي Menu من Tanrei، بكل ما تمنحه قائمة الخيارات: ينتقل التركيز إليها، ومفاتيح الأسهم والبحث بالكتابة (typeahead) تتنقل خلالها، وتنقلب وتنزاح لتبقى على الشاشة. وتُفتح تحت الزر مع قائمة كله، محاذيةً لحافة نهايته.
• ما دامت القائمة مفتوحة يعرض السهم الصغير هيئته المفتوحة (انظر السهم الصغير).
• حين تُغلق القائمة والتركيز كان داخلها، يعود التركيز إلى نصف النهاية، وهو الزر الذي فتحها.
• الضغط على نصف النهاية والقائمة مفتوحة تبديل، لا ضغط في الخارج: يطلب الإغلاق بالحدث toggle ولا يرسل close. وحين يغلق عنصر إجراء القائمة، يأتي الحدث click من العنصر أولًا، ثم الحدث close بالسبب item.
• من يغلق القائمة أمر يتبع المنصة. على الويب و Compose و React Native تضبط أنت open (أو menuExpanded أو menuVisible) من حدث التبديل، وتعيدها إلى false من حدث الإغلاق. وعلى SwiftUI و Flutter يفتح الزر مع قائمة القائمة ويغلقها بنفسه عبر الربط (binding) أو المتحكم (controller) الخاص به.

افعل

link

• سمِّ نصف البداية بالإجراء المعتاد، بالمصدر الدالّ على الفعل: «حفظ» و«دمج» و«إرسال».
• أعطِ نصف النهاية تسمية تقول ما تقدّمه القائمة: «خيارات حفظ إضافية»، لا «المزيد» ولا «القائمة».
• املأ القائمة بتنويعات الإجراء الرئيسي. والإجراء الرئيسي نفسه لا يحتاج إلى أن يتكرر هناك.
• أبقِ القائمة قصيرة. تناسبها بضعة عناصر؛ والقائمة الطويلة توحي بأن الخيارات ليست تنويعات لإجراء واحد.
• اترك separation على القيمة auto ما لم يلزم أن يختلف مثيل بعينه، ليُميَّز كل عنصر تحكم موصول في المنتج بالطريقة نفسها.
• استخدم نصف النهاية الضيق حيث تكون القائمة ثانوية والعرض ضيقًا، كصف في جدول أو ترويسة كثيفة.

لا تفعل

link

• لا تضع في القائمة إجراءات لا علاقة لها، مثل «الإعدادات» أو «المساعدة». استخدم لها زر أيقونة له قائمته الخاصة.
• لا تستخدم زرًّا مع قائمة في قائمته عنصر واحد. اعرض الإجراءين زرَّين.
• لا تحاول تعطيل نصف واحد. الخاصية disabled تنطبق على الاثنين. وإن كانت التنويعات غير متاحة، فعطّل عناصر القائمة تلك.
• لا تستخدم زرًّا مع قائمة حيث يفعل نصف النهاية شيئًا غير فتح قائمته. دلالاته تقول دائمًا إنه يفتح قائمة.

إمكانية الوصول

link

الدور

button

التسمية

The leading half is named by label, the trailing half by menuLabel, which should say what more the menu offers ("More save options"). The trailing half exposes that it opens a menu and whether it is open (aria-haspopup and aria-expanded on the web), however it opened. The icon and the chevron, whether the default or a slot's glyph, are decorative.

الحد الأدنى للهدف

تستوفي مساحة اللمس الحد الأدنى لحجم الهدف حتى لو كان الحجم المرئي أصغر. minimum 32px · pointer 44px · spacing 8px · touch 48px

لوحة المفاتيح

المفاتيح	الإجراء
Tab / Shift+Tab	Moves focus to the leading half, then to the trailing half.
Enter / Space on the leading half	Performs the main action (click).
Enter, Space / Down Arrow on the trailing half	Opens the menu (Enter and Space also close it); focus moves to the first enabled item. On a menu that opened on hover, keeps it open and moves focus to its first enabled item.
Escape (in the menu)	Closes the menu and returns focus to the trailing half.
Escape (a menu that opened on hover)	Closes the menu wherever focus is, and leaves focus where it was.

ملاحظات

• Two buttons, two Tab stops: the trailing half is a menu button in the WAI-ARIA sense, and the menu is the Tanrei Menu with its own keyboard (MNU-7).
• The menu's items are the menu's own item kinds; their events (an item's click, a checkbox item's change, a group's change) are the menu's, and reach the product as they do from a menu anywhere.
• Opening on hover is an addition for fine pointers, never a replacement: every menu that hover opens can also be opened by a press and by the keyboard, and keyboard and screen reader use is unchanged. It meets WCAG 1.4.13: the pointer can move onto the menu (the close delay), Escape dismisses it without moving the pointer, and it stays until the pointer leaves or the person dismisses it. It does not take focus, so a person typing elsewhere is not interrupted.
• Text must remain readable at 200% text size: both halves grow in height together and the label never truncates.
• How a state looks is a value decision of the active design system; components read the state's tokens and never compute the effect themselves.
• The divider is decoration: it is not exposed and takes no press. The two halves are two buttons whether a line or a gap is between them.
• A narrow trailing half is drawn narrower than the minimum target; its hit area is not (SPB-6). Its target reaches outward past the end edge, so leave room for it there.
• In the default system the outline of the outlined variant, and the divider of the outlined, tonal and elevated variants, are the hairline (the divider's color), far below 3:1 against their ground. That is within WCAG 1.4.11: the leading half is identified by its label, the trailing half by its chevron, and each half answers hover, focus and press on its own shape. The divider of the filled variant keeps the functional outline role, because a hairline cannot be seen on that fill.
• destructive adds a color, never a meaning (WCAG 1.4.1, use of color): the error color tells people who see it that the main action deletes or discards something, and nothing tells a screen reader user so but the label. So the label names the action and what it acts on ("Delete project", not "OK"). Disabled, a destructive button with menu looks like any disabled one of its variant: a button that cannot be pressed does nothing.

مولَّد من specs/button-with-menu.spec.json, tokens/sys/measure.tokens.json

ما يتكفل به المكوّن

link

• الزر مع قائمة زران بترتيب القراءة، وكل منهما موضع توقف مستقل للمفتاح Tab. نصف البداية تسمّيه تسميته. ونصف النهاية تسمّيه تسمية القائمة، ويعرّف التقنيات المساعدة بأنه يفتح قائمة وبحالة القائمة، مفتوحةً أو مغلقة، حيث تملك المنصة هاتين الخاصيتين. لا عنصر يحيط بالاثنين، فيسمع قارئ الشاشة زرين ولا شيء غير ذلك.
• الأيقونة والسهم الصغير، ومنه الرسم الذي في المنفذ chevron أو chevron-open، مخفيّان عن التقنيات المساعدة. ونصف النهاية يعرّف بحالة القائمة، مفتوحةً أو مغلقة، أيًّا كانت طريقة فتحها، بضغطة أو مفتاح أو تحويم.
• المفتاحان Enter و Space على نصف البداية ينفّذان الإجراء الرئيسي. والمفتاح Enter أو Space أو مفتاح السهم للأسفل على نصف النهاية يفتح القائمة وينقل التركيز إلى أول عنصر مفعَّل فيها. ثم تعمل القائمة كما تعمل في أي مكان، والمفتاح Escape يغلقها ويعيد التركيز إلى نصف النهاية.
• القائمة المفتوحة بالتحويم تترك التركيز حيث كان، والمفتاح Escape يغلقها أينما كان التركيز، من دون أن يتحرك المؤشر، فما أظهره التحويم يمكن إغلاقه دائمًا (WCAG 1.4.13). وضغطة Escape تلك لا تذهب أبعد؛ والتالية تصل إلى الصفحة كالعادة.
• كل نصف يستجيب للتحويم والضغط والتركيز على حدة. والنصف الآخر لا يُظهر أبدًا حالة ليست حالته.
• مساحة اللمس لكل نصف تمتد نحو الخارج وفوقه وتحته إلى الحد الأدنى للهدف. ونحو النصف الآخر تتوقف عند موضع الوصل، أو عند منتصف الفجوة، فلا يتداخل الاثنان أبدًا. وما لا يستطيع نصف النهاية الضيق بلوغه نحو نصف البداية يبلغه نحو الخارج بدلًا من ذلك، فيكون له هدفه كاملًا من دون أن يُرسم أعرض.
• الفاصل زخرفة: هو مخفي عن التقنيات المساعدة ولا يستقبل ضغطًا. والنصفان زران سواء كان بينهما خط أو فجوة.
• في النظام الافتراضي حدّ الطراز outlined، وفاصل الطُرُز outlined و tonal و elevated، هما الخط الرفيع، وهو هادئ عن قصد: نصف البداية يُعرَف بتسميته ونصف النهاية بسهمه الصغير. أما الفاصل في الطراز filled فأقوى، لأن الخط الرفيع لا يُرى على تلك التعبئة.
• التسمية لا تُقتطع أبدًا. عند أحجام النص الأكبر تلتف، ويكبر النصفان في الارتفاع معًا.
• destructive يضيف لونًا ولا شيء غيره: يحتفظ النصفان بأدوارهما وأسمائهما وحالاتهما ومفاتيحهما، لأن الويب ليس فيه دور ولا حالة لإجراء مدمّر. وفي SwiftUI، حيث يوجد دور كهذا، يأخذ نصف البداية الدور المدمّر.
• الزر مع قائمة المعطَّل يعرّف بالنصفين معطَّلين، ويُخرجهما من ترتيب التركيز، ولا يعرض قائمة، ويرسم هيئته المغلقة، أيًّا كان ما تقوله open.
• بنيات التنقيح (debug) تبلّغ عن غياب التسمية أو تسمية القائمة، وعن قائمة بلا عناصر.

فجوات معروفة في المنصات:

• الويب: لا يصل إلى المستمعين على الزر مع قائمة إلا الحدث click من نصف البداية. والحدث click على عنصر قائمة يتوقف عند الزر مع قائمة، فالمستمع على سلف لا يسمعه أبدًا: استمع على العنصر. ولهذا السبب تربط مغلِّفات React لعناصر القائمة onClick بالعنصر.
• ليس في SwiftUI خاصية تقول إن زرًّا يفتح قائمة، ولا حالة توسيع. وعنصر popover الخاص بالمنصة الذي يعرض القائمة مربوط بنصف النهاية؛ ولأن النصفين يشتركان في ارتفاع واحد ونصف النهاية ينهي الصف، فطرفه السفلي من جهة النهاية هو طرف الزر مع قائمة كله. الربط هو التبديل والإغلاق معًا، فلا يُمرَّر سبب الإغلاق. ومنفذ القائمة الفارغ ولو للحظة، كحلقة ForEach على عناصر تُحمَّل لاحقًا، هو فشل تأكيد (assertion failure) في بنيات التنقيح ويوقف تطبيق التنقيح. المفاتيح Enter و Space ومفتاح السهم للأسفل على النصفين، وعودة التركيز إلى نصف النهاية، والنقر على نصف النهاية في macOS والقائمة مفتوحة، غير مختبرة من البداية إلى النهاية.
• ليس في Flutter خاصية تقول إن زرًّا يفتح قائمة. نصف النهاية يعرّف بحالة القائمة، مفتوحةً أو مغلقة، لكن لا بأنه يفتح قائمة.
• ليس في Compose خاصية تقول إن زرًّا يفتح قائمة. نصف النهاية زر له إجراءا التوسيع والطيّ لحالته. والقائمة نفسها تحمل فجوات Compose المسرودة في صفحة قائمة الخيارات.
• ليس في React Native أيضًا خاصية تقول إن زرًّا يفتح قائمة. نصف النهاية يعرّف بحالة القائمة، مفتوحةً أو مغلقة، لكن لا بأنه يفتح قائمة.
• في React Native: الضغط على نصف النهاية والقائمة مفتوحة، وعودة التركيز إليه، ودوران السهم الصغير، اختُبرت من دون جهاز فقط.

ما عليك فعله

link

• اكتب التسميتين كلتيهما. السهم الصغير وحده ليس اسمًا، و«المزيد» بجانب «حفظ» لا تقول ما تحمله القائمة.
• على زر مع قائمة مدمّر، اجعل التسمية تقول ما الذي سيُحذف («حذف المشروع»، لا «حسنًا»): لون الخطأ لا يخبر إلا من يراه (WCAG 1.4.1، استخدام اللون).
• على الويب و Compose و React Native، اضبط open من حدث التبديل، وعلى false من حدث الإغلاق. الزر مع قائمة يطلب فقط. ومع الخاصية hoverOpen يطلب التحويم عبر حدث التبديل نفسه.
• لا تنقل التركيز بنفسك حين تُغلق القائمة. الزر مع قائمة يعيده إلى نصف النهاية.
• أعطِ كل عنصر قائمة تسمية، ومنها العناصر التي تعرض أيقونة.
• اترك فسحة وراء حافة النهاية في نصف النهاية الضيق، كي لا يتداخل هدفه مع عنصر التحكم التالي.