storyloco 2.7.0 → 2.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "storyloco",
-	"version": "2.7.0",
+	"version": "2.7.2",
 	"description": "A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, and Tailwind CSS",
 	"keywords": [
 		"storyblok",

package/packages/hubspot_form/types.ts

@@ -1,4 +1,6 @@
 export interface HubspotForm {
 	id: string
 	name: string
+	// the HubSpot portal the form belongs to; missing on values saved before 0.2.0
+	portal?: string
 }

package/packages/shared/dist/plugin.css

@@ -1,6 +1,6 @@
 /* Shared look for UI Loco's Storyblok space plugins (Shop, Mux Library), close to Storyblok's own
    editor UI. Wrap the plugin in `.plugin` and use its classes: card, button, segments, search,
-   status, table, empty, problem, skeleton. Import with `import 'storyloco/shared/plugin.css'`. */
+   status (with data-tone good, warn, danger or neutral), table, empty, problem, skeleton. Import with `import 'storyloco/shared/plugin.css'`. */
 .plugin {
 	--sb-ink: #1b243f;
 	--sb-muted: #5f6781;
@@ -197,7 +197,7 @@
 		color: var(--sb-muted);
 	}
 
-	& input,
+	& input:not([type='checkbox'], [type='radio']),
 	& textarea {
 		background: var(--sb-surface);
 		border: 1px solid var(--sb-line);
@@ -225,6 +225,17 @@
 		}
 	}
 
+	& input:is([type='checkbox'], [type='radio']) {
+		accent-color: var(--sb-primary);
+		appearance: auto;
+		block-size: 16px;
+		cursor: pointer;
+		flex: none;
+		inline-size: 16px;
+		margin: 0;
+		padding: 0;
+	}
+
 	& .button {
 		align-items: center;
 		background: var(--sb-surface);
@@ -310,7 +321,8 @@
 		padding: 0 8px;
 	}
 
-	/* A dot and the word, so state never rides on colour alone. */
+	/* A dot and the word, so state never rides on colour alone. Each plugin maps its own statuses
+	   to a tone: <span class="status" data-tone="good">Paid</span>. */
 	& .status {
 		align-items: center;
 		border-radius: 999px;
@@ -329,40 +341,25 @@
 			inline-size: 6px;
 		}
 
-		&[data-status='paid'] {
+		&[data-tone='good'] {
 			background: var(--sb-good-wash);
 			color: var(--sb-good);
 		}
 
-		&[data-status='pending'] {
+		&[data-tone='warn'] {
 			background: var(--sb-warn-wash);
 			color: var(--sb-warn);
 		}
 
-		&[data-status='failed'] {
+		&[data-tone='danger'] {
 			background: var(--sb-danger-wash);
 			color: var(--sb-danger);
 		}
 
-		&[data-status='refunded'] {
+		&[data-tone='neutral'] {
 			background: var(--sb-raised);
 			color: var(--sb-muted);
 		}
-
-		&[data-status='ready'] {
-			background: var(--sb-good-wash);
-			color: var(--sb-good);
-		}
-
-		&:is([data-status='preparing'], [data-status='unused']) {
-			background: var(--sb-warn-wash);
-			color: var(--sb-warn);
-		}
-
-		&[data-status='errored'] {
-			background: var(--sb-danger-wash);
-			color: var(--sb-danger);
-		}
 	}
 
 	& .table {