fix #154

CHANGELOG.md

@@ -1,8 +1,11 @@
 Changelog
 =========
 
+## v9.0.1 *(2023-09-09)*
+- Make `title` optional for `Panel`.
 
-## v9.0.0 *(2023-08-?)*
+
+## v9.0.0 *(2023-09-09)*
 - **New**: added `Utils` page in the docs with APIs to the utility functions exposed by the library.
 - `Tooltip` was simplified and now the positioning ensures that the tooltip is always visible on the screen.
 - `Popover` will now update its position when the window is resized.

docs-src/components/panel/Panel.svelte

@@ -10,6 +10,16 @@
 	<p>This is panel contents</p>
 </Panel>
 
+<h3>No title</h3>
+
+<Panel>
+	<p>This is panel contents</p>
+</Panel>
+
+<Panel round>
+	<p>This is panel contents</p>
+</Panel>
+
 
 <h3>Round & disabled</h3>
 

docs-src/pages/changelog.svelte

@@ -1,5 +1,9 @@
 <h1>Changelog</h1>
-<h2>v9.0.0 <em>(2023-08-?)</em></h2>
+<h2>v9.0.1 <em>(2023-09-09)</em></h2>
+<ul>
+<li>Make <code>title</code> optional for <code>Panel</code>.</li>
+</ul>
+<h2>v9.0.0 <em>(2023-09-09)</em></h2>
 <ul>
 <li><strong>New</strong>: added <code>Utils</code> page in the docs with APIs to the utility functions exposed by the library.</li>
 <li><code>Tooltip</code> was simplified and now the positioning ensures that the tooltip is always visible on the screen.</li>

src/panel/Panel.css

@@ -20,7 +20,8 @@
 	font-weight: 300;
 	font-size: var(--ui-font-m);
 	padding: 0 0.6rem 0 1rem;
-	height: 2.6rem;
+	height: 2.5rem;
+	line-height: 1;
 	-webkit-user-select: none;
 	user-select: none;
 }
@@ -30,7 +31,6 @@
 .panel-header::-webkit-details-marker { display: none; }
 
 .panel-content {
-	border-top: 1px solid var(--ui-color-border);
 	background: var(--ui-color-background);
 	padding: 1rem;
 }

src/panel/Panel.svelte

@@ -8,15 +8,19 @@
 	inert="{disabled}"
 	bind:this="{element}">
 
-	<details open="{open}" on:keydown={toggle} on:click={toggle}>
-		<summary class="panel-header" bind:this="{headerEl}" inert="{!collapsible}">
-			{title}
-			{#if collapsible}
-				<div class="chevron">{@html icons.chevronRight}</div>
-			{/if}
-		</summary>
-		<div class="panel-content"><slot></slot></div>
-	</details>
+	{#if title}
+		<details open="{open}" on:keydown={toggle} on:click={toggle}>
+			<summary class="panel-header" bind:this="{headerEl}" inert="{!collapsible}">
+				{title}
+				{#if collapsible}
+					<div class="chevron">{@html icons.chevronRight}</div>
+				{/if}
+			</summary>
+			<div class="panel-content"><slot/></div>
+		</details>
+	{:else}
+		<div class="panel-content"><slot/></div>
+	{/if}
 </div>
 
 <script>
@@ -36,7 +40,7 @@ export let disabled = false;
 export let element = undefined;
 
 
-let headerEl, expanded = open;
+let headerEl, expanded = open || !title;
 const expandedProps = { height: 0 };
 const collapsedProps = { height: 0 };