Merge pull request #2601 from skeletonlabs/dev

Merge for release 4/9/2024
skeletonlabs · Apr 9, 2024 · 5f400f1 · 5f400f1
2 parents 9efa964 + d79e4db
commit 5f400f1
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 32 deletions.
diff --git a/.changeset/cuddly-bats-return.md b/.changeset/cuddly-bats-return.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+Bugfix: Removed duplicate `class` attribute on AccordionItem SVG caret icon
diff --git a/.changeset/stale-bears-tickle.md b/.changeset/stale-bears-tickle.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+Chore: Fix JSDoc comment for AppRail border property [#2592](https://github.com/skeletonlabs/skeleton/pull/2592)
diff --git a/.changeset/thirty-cows-laugh.md b/.changeset/thirty-cows-laugh.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/tw-plugin": minor
+---
+
+Feat: Update scrollbar styles to the [latest standard](https://developer.chrome.com/docs/css-ui/scrollbar-styling).
diff --git a/packages/plugin/src/styles/base/core.css b/packages/plugin/src/styles/base/core.css
@@ -26,19 +26,12 @@ html {
 }
 
 /* === Scrollbars === */
+/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color */
+/* https://developer.chrome.com/docs/css-ui/scrollbar-styling */
 
-::-webkit-scrollbar {
-	@apply w-2;
-	@apply h-2;
-}
-::-webkit-scrollbar-track {
-	@apply !bg-surface-50-900-token px-[1px];
-}
-::-webkit-scrollbar-thumb {
-	@apply rounded-token bg-surface-400-500-token;
-}
-::-webkit-scrollbar-corner {
-	@apply !bg-surface-50-900-token;
+:root {
+	scrollbar-color: rgba(128, 128, 128, 0.5) rgba(0, 0, 0, 0.1); /* thumb / track */
+	scrollbar-width: thin;
 }
 
 /* Firefox */

diff --git a/packages/skeleton/src/lib/components/Accordion/AccordionItem.svelte b/packages/skeleton/src/lib/components/Accordion/AccordionItem.svelte
@@ -96,7 +96,7 @@
 	export let transitionOutParams: TransitionParams<TransitionOut> = getContext('transitionOutParams');
 
 	const svgCaretIcon = `
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class={classesControlCaret}>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
 			<path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
 		</svg>`;
 

diff --git a/packages/skeleton/src/lib/components/AppRail/AppRail.svelte b/packages/skeleton/src/lib/components/AppRail/AppRail.svelte
@@ -13,7 +13,7 @@
 	// Props (rail)
 	/** Rail: Provide classes to set the background color. */
 	export let background: CssClasses = 'bg-surface-100-800-token';
-	/** Rail: Provide classes to set the background color. */
+	/** Rail: Provide classes to set the border color. */
 	export let border: CssClasses = '';
 	/** Rail: Provide classes to set the width. */
 	export let width: CssClasses = 'w-20';

diff --git a/sites/skeleton.dev/src/routes/(inner)/docs/tokens/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/docs/tokens/+page.svelte
@@ -74,18 +74,6 @@
 		head: headings,
 		body: [['<code class="code">.decoration-[color]-[pairings]-token</code>', `${vColorsAll}<br>${vPairings}`, descPairings]]
 	};
-	const tableDivide: TableSource = {
-		head: headings,
-		// body: [['<code class="code">.divide-[color]-[pairings]-token</code>', `${vColorsAll}<br>${vPairings}`, descPairings + `\n` + ` <a class='anchor href='https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line' target="_blank">text-decoration-line</a>`]]
-		body: [
-			[
-				'<code class="code">.divide-[color]-[pairings]-token</code>',
-				`${vColorsAll}<br>${vPairings}`,
-				`\nImplements a <a class='anchor' href='https://tailwindcss.com/docs/text-decoration' target="_blank">text-decoration</a> color. ` +
-					descPairings
-			]
-		]
-	};
 	const tableMisc: TableSource = {
 		head: headings,
 		body: [
@@ -165,12 +153,6 @@
 			<h2 class="h2">Borders</h2>
 			<Table source={tableBorder} />
 		</section>
-		<!-- Divides -->
-		<section class="space-y-4">
-			<h2 class="h2">Divide</h2>
-			<p>Utility for controlling the border color between elements.</p>
-			<Table source={tableDivide} />
-		</section>
 		<!-- Fills -->
 		<section class="space-y-4">
 			<h2 class="h2">SVG Fill Color</h2>