final polish

CHANGELOG.md

@@ -6,7 +6,7 @@ Changelog
 - **New:** `Label` component.
 - **New icons:** `sun` and `moon` for the dark-theme switchers.
 - **Improvement:** `info`, `error` and `label` attributes are now supported on other inputs (`Autocomplete`, `InputDate`, `Select`, `ButtonToggle`, and `Toggle`).
-- **Improvement:** all components now expose `element` on the main html element, and `inputElement` on the input, if there is one (and only one). The exception is `NotificationCenter` and `MessageBox`, due to it's implementation.
+- **Improvement:** all components now expose `element` and `inputElement` (if there is one (and only one)). The exceptions are `NotificationCenter` and `MessageBox`, due to their implementation.
 - Added `title` attribute to `ButtonToggle`.
 - Fixed `selectable=false` not working on `Table`.
 
@@ -17,7 +17,7 @@ Changelog
 - `Select` - HTML structure changed: `.select-wrap select` --> `.select .input-inner .input-row select`
 - `Table` - CSS classes changed from `.table-wrapper table.table` --> `.table table`
 - `Toggle` - HTML structure changed from `.toggle .toggle-inner .toggle-scroller input` --> `.toggle .toggle-inner .toggle-label .toggle-scroller input`
-- These components previously exposed `_this` on the main html element, which is now renamed to `element`: `Button`, `Checkbox`, `InputMath`, `PushButton`, `Table`
+- These components previously exposed `_this`, which is now renamed to `element`: `Button`, `Checkbox`, `InputMath`, `PushButton`, `Table`
 
 ----
 

docs-src/app/App.css

@@ -93,6 +93,7 @@ hr {
 .docs-buttons-row {
 	display: flex;
 	flex-flow: wrap row;
+	align-items: flex-start;
 	justify-content: flex-start;
 	gap: 0.5rem;
 	flex-shrink: 0;

docs-src/components/button/Button.css

@@ -7,6 +7,10 @@
 	width: clamp(300px, 50vw, 600px);
 }
 
-.button-demo-props .input-text { display: flex; flex-flow: row; width: 100%; }
-.button-demo-props .input-text .label { width: 8rem; }
-.button-demo-props .input-text .input-text-inner { flex: 1; }
+.button-demo-props .input { display: flex; flex-flow: row; width: 100%; }
+.button-demo-props .input .label { width: 5rem; flex-shrink: 0; }
+.button-demo-props .input .input-text-inner { flex: 1; }
+
+
+.button-demo-props .toggle { display: flex; flex-flow: row; width: 100%; }
+.button-demo-props .toggle .label { width: 5rem; flex-shrink: 0; }

docs-src/components/button/Button.svelte

@@ -1,7 +1,7 @@
 <h2>Button</h2>
 
 <h3>Live demo</h3>
-<div class="docs-buttons-row" style="margin-bottom: 2rem;">
+<div class="docs-buttons-row" style="height: 3rem;">
 	{#if buttonText}
 		<Button {...props}>{buttonText}</Button>
 	{:else}

docs-src/pages/changelog.svelte

@@ -4,7 +4,7 @@
 <li><strong>New:</strong> <code>Label</code> component.</li>
 <li><strong>New icons:</strong> <code>sun</code> and <code>moon</code> for the dark-theme switchers.</li>
 <li><strong>Improvement:</strong> <code>info</code>, <code>error</code> and <code>label</code> attributes are now supported on other inputs (<code>Autocomplete</code>, <code>InputDate</code>, <code>Select</code>, <code>ButtonToggle</code>, and <code>Toggle</code>).</li>
-<li><strong>Improvement:</strong> all components now expose <code>element</code> on the main html element, and <code>inputElement</code> on the input, if there is one (and only one). The exception is <code>NotificationCenter</code> and <code>MessageBox</code>, due to it&#39;s implementation.</li>
+<li><strong>Improvement:</strong> all components now expose <code>element</code> and <code>inputElement</code> (if there is one (and only one)). The exceptions are <code>NotificationCenter</code> and <code>MessageBox</code>, due to their implementation.</li>
 <li>Added <code>title</code> attribute to <code>ButtonToggle</code>.</li>
 <li>Fixed <code>selectable=false</code> not working on <code>Table</code>.</li>
 </ul>
@@ -15,7 +15,7 @@
 <li><code>Select</code> - HTML structure changed: <code>.select-wrap select</code> --&gt; <code>.select .input-inner .input-row select</code></li>
 <li><code>Table</code> - CSS classes changed from <code>.table-wrapper table.table</code> --&gt; <code>.table table</code></li>
 <li><code>Toggle</code> - HTML structure changed from <code>.toggle .toggle-inner .toggle-scroller input</code> --&gt; <code>.toggle .toggle-inner .toggle-label .toggle-scroller input</code></li>
-<li>These components previously exposed <code>_this</code> on the main html element, which is now renamed to <code>element</code>: <code>Button</code>, <code>Checkbox</code>, <code>InputMath</code>, <code>PushButton</code>, <code>Table</code></li>
+<li>These components previously exposed <code>_this</code>, which is now renamed to <code>element</code>: <code>Button</code>, <code>Checkbox</code>, <code>InputMath</code>, <code>PushButton</code>, <code>Table</code></li>
 </ul>
 <hr>
 <h2>v7.1.2 <em>(2023-07-05)</em></h2>