.github/workflows/release-v2.yml

@@ -0,0 +1,55 @@
+name: Publish Prerelease Skeleton v2
+on:
+  push:
+    branches:
+      - v2
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Build & Publish @latest Release
+    if: github.repository == 'skeletonlabs/skeleton'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Use PNPM v8
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Use Node v18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      # PNPM Store cache setup
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Create Release Pull Request or Publish
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          commit: "chore(release): version package"
+          title: "chore(release): version package"
+          publish: pnpm ci:release
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -53,7 +53,7 @@ jobs:
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      
+
       - name: Update tw-settings.json after publish
         if: steps.changesets.outputs.published == 'true'
         continue-on-error: true

packages/skeleton/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @skeletonlabs/skeleton
 
+## 1.12.0
+
+### Minor Changes
+
+- feat: Added `regionLabel` prop to Radio Groups ([#1836](https://github.com/skeletonlabs/skeleton/pull/1836))
+
+### Patch Changes
+
+- bugfix: `autocomplete` fixed reactive update when allow and deny lists are empty. ([#1825](https://github.com/skeletonlabs/skeleton/pull/1825))
+
+- bugfix: Fixed `.bg-hover-primary-token` color in dark mode. ([#1824](https://github.com/skeletonlabs/skeleton/pull/1824))
+
+- bugfix: InputChips updates bound value only once. ([#1768](https://github.com/skeletonlabs/skeleton/pull/1768))
+
 ## 1.11.0
 
 ### Minor Changes

packages/skeleton/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@skeletonlabs/skeleton",
-	"version": "1.11.0",
+	"version": "1.12.0",
 	"description": "A SvelteKit component library.",
 	"author": "endigo9740 <chris@skeletonlabs.dev>",
 	"scripts": {

packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte

@@ -61,7 +61,7 @@
 	// Local
 	$: listedOptions = options;
 
-	function filterByAllowDeny() {
+	function filterByAllowDeny(allowlist: unknown[], denylist: unknown[]) {
 		let _options = [...options];
 		// Allowed Options
 		if (allowlist.length) {
@@ -102,7 +102,7 @@
 	}
 
 	// State
-	$: if (allowlist.length || denylist.length) filterByAllowDeny();
+	$: filterByAllowDeny(allowlist, denylist);
 	$: optionsFiltered = input ? filterOptions() : listedOptions;
 	$: sliceLimit = limit !== undefined ? limit : optionsFiltered.length;
 	// Reactive

packages/skeleton/src/lib/components/InputChip/InputChip.svelte

@@ -158,11 +158,6 @@
 	$: classesInterface = `${cInterface}`;
 	$: classesChipList = `${cChipList}`;
 	$: classesInputField = `${cInputField}`;
-	$: chipValues =
-		value?.map((val, i) => {
-			if (chipValues[i]?.val === val) return chipValues[i];
-			return { id: Math.random(), val: val };
-		}) || [];
 </script>
 
 <div class="input-chip {classesBase}" class:opacity-50={$$restProps.disabled}>

packages/skeleton/src/lib/components/Radio/RadioGroup.svelte

@@ -27,6 +27,8 @@
 	export let color: CssClasses = '';
 	/** Provide classes to set the highlighted SVG fill color. */
 	export let fill: CssClasses = '';
+	/** Provide classes for the label region. */
+	export let regionLabel: CssClasses = '';
 
 	// Props (a11y)
 	/** Provide the ARIA labelledby value. */
@@ -39,6 +41,7 @@
 	setContext('hover', hover);
 	setContext('color', color);
 	setContext('fill', fill);
+	setContext('regionLabel', regionLabel);
 
 	// Classes
 	const cBase = 'p-1';

packages/skeleton/src/lib/components/Radio/RadioItem.svelte

@@ -31,9 +31,11 @@
 	export let hover: CssClasses = getContext('hover');
 	export let color: CssClasses = getContext('color');
 	export let fill: CssClasses = getContext('fill');
+	export let regionLabel: CssClasses = getContext('regionLabel');
 
 	// Classes
-	const cBase = 'flex-auto text-base text-center cursor-pointer';
+	const cBase = 'flex-auto';
+	const cWrapper = 'text-base text-center cursor-pointer';
 	const cDisabled = 'opacity-50 cursor-not-allowed';
 
 	// Local
@@ -47,11 +49,13 @@
 		}
 	}
 
-	// Reactive
+	// State
 	$: checked = value === group;
 	$: classesActive = checked ? `${active} ${color} ${fill}` : hover;
 	$: classesDisabled = $$props.disabled ? cDisabled : '';
-	$: classesBase = `${cBase} ${padding} ${rounded} ${classesActive} ${classesDisabled} ${$$props.class ?? ''}`;
+	// Reactive
+	$: classsBase = `${cBase}`;
+	$: classesWrapper = `${cWrapper} ${padding} ${rounded} ${classesActive} ${classesDisabled} ${$$props.class ?? ''}`;
 
 	// RestProps
 	function prunedRestProps() {
@@ -60,10 +64,10 @@
 	}
 </script>
 
-<label>
+<label class="radio-label {classsBase} {regionLabel}">
 	<!-- A11y attributes are not allowed on <label> -->
 	<div
-		class="radio-item {classesBase}"
+		class="radio-item {classesWrapper}"
 		data-testid="radio-item"
 		role="radio"
 		aria-checked={checked}

packages/skeleton/src/lib/tailwind/tokens/backgrounds.cjs

@@ -18,7 +18,7 @@ module.exports = () => {
 		// Hover
 		// Example: .bg-primary-hover-token
 		classes[`.bg-${n}-hover-token:hover`] = { 'background-color': `rgb(var(--color-${n}-500) / ${hoverAlpha})` };
-		classes[`.dark .bg-${n}-hover-token:hover`] = { 'background-color': `rgb(var(--color-${n}-200) / ${hoverAlpha})` };
+		classes[`.dark .bg-${n}-hover-token:hover`] = { 'background-color': `rgb(var(--color-${n}-500) / ${hoverAlpha})` };
 
 		// Active
 		// Example: .bg-primary-active-token

sites/skeleton.dev/src/lib/components/DocsAppBar/DocsAppBar.svelte

@@ -103,12 +103,6 @@
 			</button>
 			<!-- popup -->
 			<div class="card p-4 w-60 shadow-xl" data-popup="features">
-				<a class="btn variant-filled w-full" href="https://store.skeleton.dev" target="_blank">
-					<!-- <i class="fa-solid fa-cart-shopping" /> -->
-					<span>Skeleton Store</span>
-					<span class="badge variant-filled-secondary">New</span>
-				</a>
-				<hr class="!my-4" />
 				<nav class="list-nav">
 					<ul>
 						<li>
@@ -129,6 +123,12 @@
 								<span>Blog</span>
 							</a>
 						</li>
+						<li>
+							<a href="https://store.skeleton.dev" target="_blank">
+								<span class="w-6 text-center"><i class="fa-solid fa-shopping-cart" /></span>
+								<span>Skeleton Store</span>
+							</a>
+						</li>
 						<hr class="!my-4" />
 						<li>
 							<a href="/elements/core">

sites/skeleton.dev/src/routes/(inner)/components/app-rail/+page.svelte

@@ -131,7 +131,7 @@
 					<CodeBlock
 						language="html"
 						code={`
-<AppRailTile bind:group={currentTile} name="tile-1" value={0} title="tile-1>
+<AppRailTile bind:group={currentTile} name="tile-1" value={0} title="tile-1">
 	<svelte:fragment slot="lead">(icon)</svelte:fragment>
 	<span>Tile 1</span>
 </AppRailTile>

sites/skeleton.dev/src/routes/(inner)/components/radio-groups/+page.svelte

@@ -3,7 +3,7 @@
 	import DocsShell from '$lib/layouts/DocsShell/DocsShell.svelte';
 	import { DocsFeature, type DocsShellSettings } from '$lib/layouts/DocsShell/types';
 	// Components
-	import { RadioGroup, RadioItem, CodeBlock } from '@skeletonlabs/skeleton';
+	import { CodeBlock, RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
 	// Sveld
 	import sveldRadioGroup from '@skeletonlabs/skeleton/components/Radio/RadioGroup.svelte?raw&sveld';
 	import sveldRadioItem from '@skeletonlabs/skeleton/components/Radio/RadioItem.svelte?raw&sveld';
@@ -19,7 +19,11 @@
 		restProps: 'RadioItem input',
 		components: [
 			{ label: 'RadioGroup', sveld: sveldRadioGroup },
-			{ label: 'RadioItem', sveld: sveldRadioItem, overrideProps: ['padding', 'hover', 'accent', 'color', 'fill', 'rounded'] }
+			{
+				label: 'RadioItem',
+				sveld: sveldRadioItem,
+				overrideProps: ['padding', 'hover', 'accent', 'color', 'fill', 'rounded', 'regionLabel']
+			}
 		],
 		keyboard: [
 			['<kbd class="kbd">Tab</kbd>', 'Moves focus to the next focusable RadioItem.'],
@@ -40,6 +44,8 @@
 	<svelte:fragment slot="sandbox">
 		<DocsPreview>
 			<svelte:fragment slot="preview">
+				<!-- Use this to test full width sizing -->
+				<!-- <RadioGroup class="text-token w-full" display="flex"> -->
 				<RadioGroup class="text-token">
 					<RadioItem bind:group={justify} name="justify" value={0}>
 						<i class="fa-solid fa-align-left" />

sites/skeleton.dev/src/routes/+page.svelte

@@ -20,12 +20,19 @@
 
 <div>
 	<!-- Promo Banner -->
-	<div class="variant-filled-secondary p-4 flex justify-between items-center gap-4">
-		<div class="flex items-center gap-6">
-			<i class="fa-solid fa-cart-shopping text-xl" />
-			<p><strong>Skeleton Store</strong> now available! Get premium templates designed for Skeleton.</p>
+	<div class="variant-filled-warning p-4">
+		<div class="w-full max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-[1fr_auto] gap-4">
+			<div class="flex items-center gap-6">
+				<span class="text-xl">🎉</span>
+				<p>The Skeleton v2.0 Release Candidate is now available!</p>
+			</div>
+			<div class="flex gap-4">
+				<a class="btn variant-filled" href="https://github.com/skeletonlabs/skeleton/discussions/1845" target="_blank">What's New?</a>
+				<a class="btn variant-filled" href="https://skeleton-docs-git-v2-skeleton-labs.vercel.app/docs/get-started" target="_blank">
+					Docs &rarr;
+				</a>
+			</div>
 		</div>
-		<a class="btn variant-filled" href="https://store.skeleton.dev" target="_blank">Visit Store</a>
 	</div>
 
 	<!-- hero -->