Each height-locked control sets height (not vertical padding) from the same token with
box-sizing: border-box, so they line up regardless of differing font sizes, borders,
or content. The menu and select triggers are ol-buttons, so they inherit the button's
height for free; the chevron must not grow them. The chip is padding-driven and still has to
land on the line. The medium row also carries the controls that come in one size only: the
toggle button, the split shelf button (whose halves set min-height so a long shelf
name can wrap — the host's border brings it to the token), the outline shelf square, and tabs.
Toggle the guides and read each row against them.
Small — --control-height-small
Button
Primary
Ghost
Grid
List
Sort by
Language
Chip
Medium — --control-height-medium
Button
Primary
Ghost
Grid
List
Sort by
Language
Chip
TabTab
Large — --control-height-large
Button
Primary
Ghost
Grid
List
Sort by
Language
Medium neighbours — not height-locked
The two medium neighbours that are deliberately off the token. The switch is a
checkbox-class control: it centres on its label's text line, not on a button box, so
locking it would only wrap it in an invisible frame. The menu row is sized to be tapped,
and drops to --control-height-medium only on hover-capable pointers.
Control states
Every interactive control in each of its states, side by side. Switch the surface to see the same
grid on the page canvas, a sunken panel, or the header grey — a raised control is tuned for white,
and this is where its fill, border and specular highlight either hold up or vanish. Magnify to
check the 1px details: the inset highlight along a control's top edge, the hairline border, and
whether a selected state carries a border at all. Focus states only show under keyboard focus —
see Focus rings.
Sweep the pointer along the row. Each caption names the mechanism the control uses, so a hover that
looks different from its neighbour's can be matched to why. The rule is one mechanism per family:
raised controls step fill and border together, flat rows take the translucent overlay, saturated
fills brighten, and nothing fades in. Shelf button and pagination hover with the row overlay
although they are controls; the segmented control and tabs move only their text.
The rule says selected has one look: --color-control-selected-bg with
--color-link text. This row puts every component's selected or current state next to
that reference, grouped by the mechanism it actually uses. Four show up today: the tinted fill,
a solid primary fill, a raised ink pill, and an underline. Menu rows take the tinted fill too,
on their pill, with the radio, checkbox or icon still carrying the state (pin them open in
Menus and panels below). Decide which of these are deliberate and which are drift.
Tint and blue text
Selected
Button
tint, border, link text
Selected
Ghost button
same tint; border appears
Toggle button
tint, border, link text, blue track
Pagination
tint and link text, no border
Shelf button
tint, border, link text, filled glyph
Outline shelf
tint and border; glyph is --primary-blue
Solid fill
Fiction
Chip
solid primary, white text, check glyph
Science
Chip, subject
tint unchanged; only the close glyph
Every blue a selected or active state reaches for, as it paints over white, with the text that
sits on it measured: link blue on the tints, white on the solids. If two of these are a hair
apart they are a candidate to merge.
Aa
Selected tint
--color-control-selected-bg
Button, toggle button, pagination, editor toolbar
Aa
Selected border
--color-control-selected-border
Button and toggle button; pagination omits it
Aa
Primary subtle
--color-primary-subtle
Info banner wash
Aa
Info bg
--color-info-bg
Message wash; one step off primary-subtle
Aa
Segmented track
--color-control-track
The pill sits proud of it in ink, not blue
Aa
Primary
--color-primary
Primary button, selected chip, switch track, radio accent
Aa
Link
--color-link
Selected label text; menu current row
Aa
Focus ring
--color-focus-ring
Every focus ring
Menus and panels
The five panel-shaped components side by side. Pin them open to compare the rows directly: the
row height (--menu-row-height, which is the medium control height on a fine
pointer), the inset pill and its hover, the selected row's tint and what sits in it (nothing but
the tint in the menu, a radio in options, a checkbox in select, a filled icon in shelf actions,
no selection in the bare popover), the section headings, and the search field's height and
focus ring against the input in the alignment row above. Pinning turns off outside-click
dismissal; Escape still closes the frontmost one.
Tooltip
Popover
Language
Row anatomy
The light-DOM row the design docs use as the reference, next to the pieces a Lit row adds. A
heading, a plain row, a hovered-looking row, the current row in the menu's style, and a divider.
Compare against the pinned panels above.
Surfaces and text
Every surface a control or a line of text can land on, with the text tokens painted on it and
their measured contrast, the border weights as rules, and a small set of raised controls. Read it
for three things: which text tokens are safe on which surface (muted ink is AA on white and
the lightest raised surface only), whether a raised control still reads as raised when its
surface is already off-white, and whether the status washes and the selected tint sit in the
same family or fight.
Surface
--color-surface
Text — the quick brown fox
Secondary — the quick brown fox
Muted — the quick brown fox
Link — the quick brown fox
Icon muted — the quick brown fox
Button
Ghost
Selected
Chip
Cards, inputs, dropdowns. Where almost every control is designed.
Background
--color-background
Text — the quick brown fox
Secondary — the quick brown fox
Muted — the quick brown fox
Link — the quick brown fox
Icon muted — the quick brown fox
Button
Ghost
Selected
Chip
The page canvas. Controls land here on the home page and search results.
Sunken
--color-surface-sunken
Text — the quick brown fox
Secondary — the quick brown fox
Muted — the quick brown fox
Link — the quick brown fox
Icon muted — the quick brown fox
Button
Ghost
Selected
Chip
Recessed panels and image wells.
Header
--color-surface-header
Text — the quick brown fox
Secondary — the quick brown fox
Muted — the quick brown fox
Link — the quick brown fox
Icon muted — the quick brown fox
Button
Ghost
Selected
Chip
The site header, the drawer panel, table heads.
Control fill
--color-control-bg
Text — the quick brown fox
Secondary — the quick brown fox
Muted — the quick brown fox
Link — the quick brown fox
Icon muted — the quick brown fox
Button
Ghost
Selected
Chip
The resting fill of a raised neutral control. A card that uses it as a background makes the button on it disappear.
Primary subtle
--color-primary-subtle
Text — the quick brown fox
Secondary — the quick brown fox
Muted — the quick brown fox
Link — the quick brown fox
Icon muted — the quick brown fox
Button
Ghost
Selected
Chip
Soft blue wash — info banners, the selected-tint family.
Selected surface
--color-control-selected-surface
Text — the quick brown fox
Secondary — the quick brown fox
Muted — the quick brown fox
Link — the quick brown fox
Icon muted — the quick brown fox
Button
Ghost
Selected
Chip
The opaque twin of the selected tint.
Info
--color-info-bg
Text — the quick brown fox
Secondary — the quick brown fox
Muted — the quick brown fox
Link — the quick brown fox
Icon muted — the quick brown fox
Button
Ghost
Selected
Chip
Status wash — messages and banners.
Success
--color-success-bg
Text — the quick brown fox
Secondary — the quick brown fox
Muted — the quick brown fox
Link — the quick brown fox
Icon muted — the quick brown fox
Button
Ghost
Selected
Chip
Status wash.
Warning
--color-warning-bg
Text — the quick brown fox
Secondary — the quick brown fox
Muted — the quick brown fox
Link — the quick brown fox
Icon muted — the quick brown fox
Button
Ghost
Selected
Chip
Status wash.
Error
--color-error-bg
Text — the quick brown fox
Secondary — the quick brown fox
Muted — the quick brown fox
Link — the quick brown fox
Icon muted — the quick brown fox
Button
Ghost
Selected
Chip
Status wash.
Inverse
--color-surface-inverse
Inverse — the quick brown fox
Tooltips and dark chips. No control is specified for this surface; a secondary button dropped here would paint its own white fill.
Focus rings
Click into the first field, then Tab along the row. Every ring should be the same 2px of
--color-focus-ring at the same distance from the control's edge. Two mechanisms are
in use today — an outline that sits outside the rounded box, and a
box-shadow that hugs it — and the offsets range from 2px outside to 2px inside, so
a ring that looks tighter or looser than its neighbour is the thing to note. Inside the pinned
menus above, rows show focus as a fill rather than a ring.
A realistic toolbar at each control size. Checks that the sizes stay usable together, not just
individually — the small row is what most filter bars actually use.
Small
Filter
Grid
List
Language
Sort by
Apply
Medium
Filter
Grid
List
Language
Sort by
Apply
Large
Filter
Grid
List
Language
Sort by
Apply
Long content
The same controls carrying labels far longer than their designers assumed — long translations,
unbroken strings, and CJK. Anything that overflows its container or clips its text is a bug.
Zustandsänderungsbenachrichtigungseinstellungen
Continuar con la configuración de la cuenta
Wissenschaftliche Abhandlungen
García Márquez, Gabriel José de la Concordia
Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
すべての書籍
読めるもののみ
Une maintenance planifiée est prévue le 12 juin ; certains services seront temporairement indisponibles.
Right-to-left
The same components under dir="rtl", carrying Arabic and Hebrew. Anything laid out
with logical properties (margin-inline-start, padding-inline,
inset-inline-end) mirrors on its own; anything set with left or
right does not. Flip the direction and compare: an icon, chevron, or close button
stuck on the wrong side, text that still aligns left, a popover that opens away from its
trigger, or a Latin title and number that scramble inside an Arabic sentence is a bug.
مجموعة من الحكايات الشعبية التي جُمعت على مدى قرون، تروي فيها شهرزاد قصة كل ليلة
لتؤجل حكم الإعدام. تتضمن الطبعة الإنجليزية الأولى The Arabian Nights' Entertainments
التي صدرت عام 1706، ثم ترجمة Richard Burton الكاملة في 16 مجلدًا بين
عامي 1885 و1888. ضمّت الترجمات اللاحقة حكايات لم ترد في المخطوطات العربية الأصلية،
مثل علاء الدين وعلي بابا والأربعين لصًا. تُعد هذه الحكايات من أكثر النصوص تأثيرًا في
الأدب العالمي، وقد أُعيدت صياغتها في المسرح والسينما والموسيقى مرات لا تُحصى، وما زالت
تُقرأ اليوم بلغات كثيرة وفي طبعات متنوعة تناسب القراء من كل الأعمار.
وتختلف الطبعات اختلافًا كبيرًا في عدد الحكايات وترتيبها، إذ لا توجد نسخة واحدة معتمدة؛
فبعضها يقتصر على مئتي ليلة، وبعضها يبلغ الألف بإضافة حكايات من مصادر أخرى. وقد اعتمدت
طبعة بولاق الصادرة في القاهرة عام 1835 مرجعًا لكثير من الترجمات الحديثة، وهي الطبعة
التي يستند إليها هذا السجل.
أما المخطوطة السورية المحفوظة في المكتبة الوطنية الفرنسية، وهي أقدم ما وصلنا من النص،
فلا تتجاوز مئتين وثمانين ليلة، وقد اعتمدها محسن مهدي في طبعته النقدية عام 1984، فكانت
أساسًا لترجمة Husain Haddawy الإنجليزية التي صدرت بعدها بست سنوات.
ولا يزال الجدل قائمًا حول أصل الحكايات: أهي هندية أم فارسية أم عربية خالصة؟ والأرجح أنها
نشأت في الهند، وانتقلت إلى فارس باسم «هزار أفسانه»، ثم عُرّبت في بغداد في العصر العباسي،
وأضيفت إليها طبقات من الحكايات المصرية في القاهرة المملوكية، فجاءت على صورتها التي
نعرفها اليوم مزيجًا من ثقافات عدة وقرون متعاقبة.
هذه الطبعة تحتوي على 3 أخطاء استيراد لم تُحل بعد. راجع السجل
