From 5ddf4ca779042be3a11423ad02204e71ede6a0ca Mon Sep 17 00:00:00 2001
From: Martin Hobert <info@dosh.dk>
Date: Fri, 23 Jun 2023 12:23:18 +0200
Subject: [PATCH] docs: fix attribute example in basic markup (#8813)

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .../docs/02-template-syntax/02-basic-markup.md        |  5 +++--
 .../docs/02-template-syntax/05-element-directives.md  | 11 ++++++-----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/documentation/docs/02-template-syntax/02-basic-markup.md b/documentation/docs/02-template-syntax/02-basic-markup.md
index f57a47381f..441856a79a 100644
--- a/documentation/docs/02-template-syntax/02-basic-markup.md
+++ b/documentation/docs/02-template-syntax/02-basic-markup.md
@@ -62,9 +62,10 @@ An expression might include characters that would cause syntax highlighting to f
 When the attribute name and value match (`name={name}`), they can be replaced with `{name}`.
 
 ```svelte
-<!-- These are equivalent -->
-<button {disabled}>...</button>
 <button {disabled}>...</button>
+<!-- equivalent to
+<button disabled={disabled}>...</button>
+-->
 ```
 
 By convention, values passed to components are referred to as _properties_ or _props_ rather than _attributes_, which are a feature of the DOM.
diff --git a/documentation/docs/02-template-syntax/05-element-directives.md b/documentation/docs/02-template-syntax/05-element-directives.md
index 0df2582cb7..3f412ca34c 100644
--- a/documentation/docs/02-template-syntax/05-element-directives.md
+++ b/documentation/docs/02-template-syntax/05-element-directives.md
@@ -105,12 +105,13 @@ The simplest bindings reflect the value of a property, such as `input.value`.
 <input type="checkbox" bind:checked={yes} />
 ```
 
-If the name matches the value, you can use shorthand.
+If the name matches the value, you can use a shorthand.
 
 ```svelte
-<!-- These are equivalent -->
-<input bind:value />
 <input bind:value />
+<!-- equivalent to
+<input bind:value={value} />
+-->
 ```
 
 Numeric input values are coerced; even though `input.value` is a string as far as the DOM is concerned, Svelte will treat it as a number. If the input is empty or invalid (in the case of `type="number"`), the value is `undefined`.
@@ -339,8 +340,8 @@ A `class:` directive provides a shorter way of toggling a class on an element.
 
 ```svelte
 <!-- These are equivalent -->
-<div class={active ? 'active' : ''}>...</div>
-<div class:active>...</div>
+<div class={isActive ? 'active' : ''}>...</div>
+<div class:active={isActive}>...</div>
 
 <!-- Shorthand, for when name and value match -->
 <div class:active>...</div>