@htmlbricks/hb-vertical-img-txt-archive 0.71.35 → 0.71.37

package/manifest.json

@@ -10,6 +10,14 @@
             "collectionItemClick": {
               "additionalProperties": false,
               "properties": {
+                "link_type": {
+                  "enum": [
+                    "tab",
+                    "page",
+                    "event"
+                  ],
+                  "type": "string"
+                },
                 "uri": {
                   "type": "string"
                 }
@@ -44,6 +52,7 @@
               "type": "string"
             },
             "size": {
+              "description": "Reserved for future layout tuning; column count is derived from viewport width.",
               "type": "number"
             },
             "style": {
@@ -66,6 +75,7 @@
             },
             "link": {
               "additionalProperties": false,
+              "description": "When set, the card is clickable: dispatches `collectionItemClick` and applies `tab` / `page` navigation; `event` only notifies the host.",
               "properties": {
                 "type": {
                   "enum": [
@@ -98,7 +108,6 @@
           "required": [
             "title",
             "text",
-            "link",
             "image"
           ],
           "type": "object"
@@ -106,7 +115,7 @@
       }
     }
   },
-  "description": "Vertical archive grid: `collection` items with `title`, `text`, `image`, and `link` (e.g. `type` + `uri`). Optional `size` sets column count; CSS parts style container, item, image, title, and text. Emits `collectionItemClick` when an item is chosen.",
+  "description": "Vertical archive grid: `collection` items with `title`, `text`, `image`, and optional `link` (`type` + `uri`). Clicking a card with a link dispatches `collectionItemClick` and performs `tab` / `page` navigation; `event` link types only emit. CSS parts style container, item, image, title, and text.",
   "storybookArgs": {
     "collection": {
       "control": {
@@ -119,26 +128,68 @@
       }
     },
     "collectionItemClick": {
-      "collectionItemClick": "eventEvent"
+      "action": "collectionItemClick"
     }
   },
   "styleSetup": {
-    "vars": [],
+    "vars": [
+      {
+        "name": "--bulma-block-spacing",
+        "valueType": "number",
+        "defaultValue": "",
+        "description": "Grid gap between archive cards."
+      },
+      {
+        "name": "--bulma-radius",
+        "valueType": "number",
+        "defaultValue": "",
+        "description": "Rounded corners on card images."
+      },
+      {
+        "name": "--bulma-column-gap",
+        "valueType": "number",
+        "defaultValue": "",
+        "description": "Space between image stack and text block."
+      },
+      {
+        "name": "--bulma-size-5",
+        "valueType": "number",
+        "defaultValue": "",
+        "description": "Card title (`h3`) font size."
+      },
+      {
+        "name": "--bulma-text",
+        "valueType": "color",
+        "defaultValue": "",
+        "description": "Body copy color under each title."
+      },
+      {
+        "name": "--bulma-line-height-main",
+        "valueType": "number",
+        "defaultValue": "",
+        "description": "Line height for description paragraphs."
+      }
+    ],
     "parts": [
       {
-        "name": "container"
+        "name": "container",
+        "description": "CSS grid host; column count follows viewport width (not the optional `size` prop)."
       },
       {
-        "name": "item"
+        "name": "item",
+        "description": "Single archive card wrapper (image + text column)."
       },
       {
-        "name": "image"
+        "name": "image",
+        "description": "Cover image element for the card."
       },
       {
-        "name": "title"
+        "name": "title",
+        "description": "Card heading (`h3`)."
       },
       {
-        "name": "text"
+        "name": "text",
+        "description": "Supporting paragraph under the title."
       }
     ]
   },
@@ -378,7 +429,7 @@
       }
     }
   ],
-  "iifeIntegrity": "sha384-NjMP2z4SJRYGrqckfTGCIpeonzU/HjrpwlKmzqzaztGWXYdhLeC0CYnHzEbN6cL5",
+  "iifeIntegrity": "sha384-gZbNjFzZEIOLk21lxyWkiqYceE79JVZFYcKEJxaqubJWKTrK2l+nFPhfnhyL12HX",
   "dependencies": [],
   "screenshots": [],
   "licenses": [
@@ -399,5 +450,5 @@
   "size": {},
   "iifePath": "main.iife.js",
   "repoName": "@htmlbricks/hb-vertical-img-txt-archive",
-  "version": "0.71.35"
+  "version": "0.71.37"
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@htmlbricks/hb-vertical-img-txt-archive",
-  "version": "0.71.35",
+  "version": "0.71.37",
   "contributors": [],
-  "description": "Vertical archive grid: `collection` items with `title`, `text`, `image`, and `link` (e.g. `type` + `uri`). Optional `size` sets column count; CSS parts style container, item, image, title, and text. Emits `collectionItemClick` when an item is chosen.",
+  "description": "Vertical archive grid: `collection` items with `title`, `text`, `image`, and optional `link` (`type` + `uri`). Clicking a card with a link dispatches `collectionItemClick` and performs `tab` / `page` navigation; `event` link types only emit. CSS parts style container, item, image, title, and text.",
   "licenses": [
     {
       "type": "Apache-2.0",

package/types/webcomponent.type.d.json

@@ -15,6 +15,7 @@
           "type": "string"
         },
         "size": {
+          "description": "Reserved for future layout tuning; column count is derived from viewport width.",
           "type": "number"
         },
         "style": {
@@ -37,6 +38,7 @@
         },
         "link": {
           "additionalProperties": false,
+          "description": "When set, the card is clickable: dispatches `collectionItemClick` and applies `tab` / `page` navigation; `event` only notifies the host.",
           "properties": {
             "type": {
               "enum": [
@@ -69,7 +71,6 @@
       "required": [
         "title",
         "text",
-        "link",
         "image"
       ],
       "type": "object"

package/types/webcomponent.type.d.ts

@@ -2,7 +2,8 @@ export type Item = {
 	title: string;
 	subtitle?: string;
 	text: string;
-	link: { type: "tab" | "page" | "event"; uri: string };
+	/** When set, the card is clickable: dispatches `collectionItemClick` and applies `tab` / `page` navigation; `event` only notifies the host. */
+	link?: { type: "tab" | "page" | "event"; uri: string };
 	index?: number;
 	image: string;
 };
@@ -11,9 +12,10 @@ export type Component = {
 	id?: string;
 	style?: string;
 	collection: Item[];
+	/** Reserved for future layout tuning; column count is derived from viewport width. */
 	size?: number;
 };
 
 export type Events = {
-	collectionItemClick: { uri: string };
+	collectionItemClick: { uri: string; link_type?: "tab" | "page" | "event" };
 };

package/types/webcomponent_events.type.d.json

@@ -8,6 +8,14 @@
         "collectionItemClick": {
           "additionalProperties": false,
           "properties": {
+            "link_type": {
+              "enum": [
+                "tab",
+                "page",
+                "event"
+              ],
+              "type": "string"
+            },
             "uri": {
               "type": "string"
             }