feat(selectable-tile): add SelectableTileGroup component

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 166 components exported from carbon-components-svelte@0.93.0.
+> 167 components exported from carbon-components-svelte@0.93.0.
 
 ## Components
 
@@ -112,6 +112,7 @@
 - [`SelectItemGroup`](#selectitemgroup)
 - [`SelectSkeleton`](#selectskeleton)
 - [`SelectableTile`](#selectabletile)
+- [`SelectableTileGroup`](#selectabletilegroup)
 - [`SideNav`](#sidenav)
 - [`SideNavDivider`](#sidenavdivider)
 - [`SideNavItems`](#sidenavitems)
@@ -3320,6 +3321,30 @@ None.
 | mouseleave | forwarded  | --                  | --          |
 | keydown    | forwarded  | --                  | --          |
 
+## `SelectableTileGroup`
+
+### Props
+
+| Prop name | Required | Kind             | Reactive | Type                                 | Default value          | Description                                      |
+| :-------- | :------- | :--------------- | :------- | ------------------------------------ | ---------------------- | ------------------------------------------------ |
+| selected  | No       | <code>let</code> | Yes      | <code>T[]</code>                     | <code>[]</code>        | Specify the selected tile values                 |
+| disabled  | No       | <code>let</code> | No       | <code>boolean</code>                 | <code>false</code>     | Set to `true` to disable the tile group          |
+| name      | No       | <code>let</code> | No       | <code>string &#124; undefined</code> | <code>undefined</code> | Specify a name attribute for the checkbox inputs |
+| legend    | No       | <code>let</code> | No       | <code>string</code>                  | <code>""</code>        | Specify the legend text                          |
+
+### Slots
+
+| Slot name | Default | Props                               | Fallback |
+| :-------- | :------ | :---------------------------------- | :------- |
+| --        | Yes     | <code>Record<string, never> </code> | --       |
+
+### Events
+
+| Event name | Type       | Detail         | Description |
+| :--------- | :--------- | :------------- | :---------- |
+| select     | dispatched | <code>T</code> | --          |
+| deselect   | dispatched | <code>T</code> | --          |
+
 ## `SideNav`
 
 ### Props

bun.lock

@@ -19,7 +19,6 @@
         "autoprefixer": "^10.4.21",
         "carbon-components": "10.58.12",
         "carbon-icons-svelte": "^13.4.0",
-        "carbon-preprocess-svelte": "^0.11.11",
         "culls": "^0.1.1",
         "jsdom": "^27.0.1",
         "postcss": "^8.5.5",
@@ -334,8 +333,6 @@
 
     "carbon-icons-svelte": ["carbon-icons-svelte@13.6.0", "", {}, "sha512-ZH2GcXVN/U2kBGj9CSnoxrsrSZpT1mVrjrNQTMEiLJ88U4tpkh758q3arLVX5Ji80vLGS/zNJoELdBGJbx3fZw=="],
 
-    "carbon-preprocess-svelte": ["carbon-preprocess-svelte@0.11.13", "", { "dependencies": { "estree-walker": "^2.0.2", "magic-string": "^0.30.17", "postcss": "^8.5.4", "postcss-discard-empty": "^7.0.1" } }, "sha512-27//v1yfAJ140p1k23gWFBBf82FzW87uKsHodJ78FU7MGjmRu6afzIsrt5tpeVfsf7lD4JTJeysMcUiwVj16lQ=="],
-
     "chai": ["chai@6.2.1", "", {}, "sha512-p4Z49OGG5W/WBCPSS/dH3jQ73kD6tiMmUM+bckNK6Jr5JHMG3k9bg/BvKR8lKmtVBKmOiuVaV2ws8s9oSbwysg=="],
 
     "chalk": ["chalk@2.4.2", "", { "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", "supports-color": "^5.3.0" } }, "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ=="],
@@ -450,7 +447,7 @@
 
     "escape-string-regexp": ["escape-string-regexp@1.0.5", "", {}, "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="],
 
-    "estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
+    "estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
 
     "expect-type": ["expect-type@1.2.2", "", {}, "sha512-JhFGDVJ7tmDJItKhYgJCGLOWjuK9vPxiXoUFLwLDc99NlmklilbiQJwoctZtt13+xMw91MCk/REan6MWHqDjyA=="],
 
@@ -640,8 +637,6 @@
 
     "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
 
-    "postcss-discard-empty": ["postcss-discard-empty@7.0.1", "", { "peerDependencies": { "postcss": "^8.4.32" } }, "sha512-cFrJKZvcg/uxB6Ijr4l6qmn3pXQBna9zyrPC+sK0zjbkDUZew+6xDltSF7OeB7rAtzaaMVYSdbod+sZOCWnMOg=="],
-
     "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
 
     "prettier": ["prettier@3.6.2", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ=="],
@@ -840,18 +835,12 @@
 
     "@testing-library/dom/dom-accessibility-api": ["dom-accessibility-api@0.5.16", "", {}, "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="],
 
-    "@vitest/mocker/estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
-
     "@vitest/mocker/magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
     "@vitest/snapshot/magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
     "carbon-components/flatpickr": ["flatpickr@4.6.1", "", {}, "sha512-3ULSxbXmcMIRzer/2jLNweoqHpwDvsjEawO2FUd9UFR8uPwLM+LruZcPDpuZStcEgbQKhuFOfXo4nYdGladSNw=="],
 
-    "carbon-preprocess-svelte/magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
-
-    "code-red/estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
-
     "conventional-changelog-writer/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 
     "cssstyle/css-tree": ["css-tree@3.1.0", "", { "dependencies": { "mdn-data": "2.12.2", "source-map-js": "^1.0.1" } }, "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w=="],
@@ -874,8 +863,6 @@
 
     "path-type/pify": ["pify@3.0.0", "", {}, "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg=="],
 
-    "periscopic/estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
-
     "pretty-format/ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],
 
     "read-pkg/normalize-package-data": ["normalize-package-data@2.5.0", "", { "dependencies": { "hosted-git-info": "^2.1.4", "resolve": "^1.10.0", "semver": "2 || 3 || 4 || 5", "validate-npm-package-license": "^3.0.1" } }, "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA=="],
@@ -884,8 +871,6 @@
 
     "rollup-plugin-svelte/@rollup/pluginutils": ["@rollup/pluginutils@4.2.1", "", { "dependencies": { "estree-walker": "^2.0.1", "picomatch": "^2.2.2" } }, "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ=="],
 
-    "svelte/estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
-
     "vite/rollup": ["rollup@4.46.2", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.46.2", "@rollup/rollup-android-arm64": "4.46.2", "@rollup/rollup-darwin-arm64": "4.46.2", "@rollup/rollup-darwin-x64": "4.46.2", "@rollup/rollup-freebsd-arm64": "4.46.2", "@rollup/rollup-freebsd-x64": "4.46.2", "@rollup/rollup-linux-arm-gnueabihf": "4.46.2", "@rollup/rollup-linux-arm-musleabihf": "4.46.2", "@rollup/rollup-linux-arm64-gnu": "4.46.2", "@rollup/rollup-linux-arm64-musl": "4.46.2", "@rollup/rollup-linux-loongarch64-gnu": "4.46.2", "@rollup/rollup-linux-ppc64-gnu": "4.46.2", "@rollup/rollup-linux-riscv64-gnu": "4.46.2", "@rollup/rollup-linux-riscv64-musl": "4.46.2", "@rollup/rollup-linux-s390x-gnu": "4.46.2", "@rollup/rollup-linux-x64-gnu": "4.46.2", "@rollup/rollup-linux-x64-musl": "4.46.2", "@rollup/rollup-win32-arm64-msvc": "4.46.2", "@rollup/rollup-win32-ia32-msvc": "4.46.2", "@rollup/rollup-win32-x64-msvc": "4.46.2", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-WMmLFI+Boh6xbop+OAGo9cQ3OgX9MIg7xOQjn+pTCwOkk+FNDAeAemXkJ3HzDJrVXleLOFVa1ipuc1AmEx1Dwg=="],
 
     "vitest/magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
@@ -898,8 +883,6 @@
 
     "@vitest/snapshot/magic-string/@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
 
-    "carbon-preprocess-svelte/magic-string/@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
-
     "cssstyle/css-tree/mdn-data": ["mdn-data@2.12.2", "", {}, "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA=="],
 
     "dotgitignore/find-up/locate-path": ["locate-path@3.0.0", "", { "dependencies": { "p-locate": "^3.0.0", "path-exists": "^3.0.0" } }, "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A=="],
@@ -918,6 +901,8 @@
 
     "read-pkg/normalize-package-data/semver": ["semver@5.7.2", "", { "bin": { "semver": "bin/semver" } }, "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g=="],
 
+    "rollup-plugin-svelte/@rollup/pluginutils/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
+
     "rollup-plugin-svelte/@rollup/pluginutils/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
 
     "vitest/magic-string/@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 166,
+  "total": 167,
   "components": [
     {
       "moduleName": "Accordion",
@@ -13651,6 +13651,120 @@
       },
       "contexts": []
     },
+    {
+      "moduleName": "SelectableTileGroup",
+      "filePath": "src/Tile/SelectableTileGroup.svelte",
+      "props": [
+        {
+          "name": "selected",
+          "kind": "let",
+          "description": "Specify the selected tile values",
+          "type": "T[]",
+          "value": "[]",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` to disable the tile group",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "name",
+          "kind": "let",
+          "description": "Specify a name attribute for the checkbox inputs",
+          "type": "string | undefined",
+          "value": "undefined",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "legend",
+          "kind": "let",
+          "description": "Specify the legend text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "moduleExports": [],
+      "slots": [
+        {
+          "name": null,
+          "default": true,
+          "slot_props": "Record<string, never>"
+        }
+      ],
+      "events": [
+        {
+          "type": "dispatched",
+          "name": "select",
+          "detail": "T"
+        },
+        {
+          "type": "dispatched",
+          "name": "deselect",
+          "detail": "T"
+        }
+      ],
+      "typedefs": [],
+      "generics": [
+        "T",
+        "T extends string = string"
+      ],
+      "rest_props": {
+        "type": "Element",
+        "name": "fieldset"
+      },
+      "contexts": [
+        {
+          "key": "SelectableTileGroup",
+          "typeName": "SelectableTileGroupContext",
+          "properties": [
+            {
+              "name": "selectedValues",
+              "type": "import(\"svelte/store\").Writable<T[]>",
+              "description": "",
+              "optional": false
+            },
+            {
+              "name": "groupName",
+              "type": "any",
+              "optional": false
+            },
+            {
+              "name": "add",
+              "type": "(data: { selected: boolean; value: T }) => void",
+              "description": "",
+              "optional": false
+            },
+            {
+              "name": "update",
+              "type": "(data: { value: T; selected: boolean }) => void",
+              "description": "",
+              "optional": false
+            }
+          ]
+        }
+      ]
+    },
     {
       "moduleName": "SideNav",
       "filePath": "src/UIShell/SideNav.svelte",

docs/src/pages/components/SelectableTile.svx

@@ -1,9 +1,9 @@
 ---
-components: ["SelectableTile"]
+components: ["SelectableTileGroup", "SelectableTile"]
 ---
 
 <script>
-  import { SelectableTile } from "carbon-components-svelte";
+  import { SelectableTileGroup, SelectableTile } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -13,46 +13,58 @@ components: ["SelectableTile"]
 
 Group multiple selectable tiles together for multi-selection scenarios.
 
-<div role="group" aria-label="selectable tiles">
-  <SelectableTile selected>
+<SelectableTileGroup legend="Select options" name="options" selected={["option1", "option2"]}>
+  <SelectableTile value="option1">
     Multi-select Tile
   </SelectableTile>
-  <SelectableTile selected>
+  <SelectableTile value="option2">
     Multi-select Tile
   </SelectableTile>
-  <SelectableTile>
+  <SelectableTile value="option3">
     Multi-select Tile
   </SelectableTile>
-</div>
+</SelectableTileGroup>
+
+## Reactive (one-way binding)
+
+Update the selected values using the `select` and `deselect` events.
+
+<FileSource src="/framed/SelectableTile/SelectableTileReactiveOneWay" />
+
+## Reactive (two-way binding)
+
+Bind to the `selected` prop for simpler state management.
+
+<FileSource src="/framed/SelectableTile/SelectableTileReactive" />
 
 ## Light variant
 
 Use the light variant for light backgrounds.
 
-<div role="group" aria-label="selectable tiles">
-  <SelectableTile light selected>
+<SelectableTileGroup legend="Select options" name="options-light" selected={["option1", "option2"]}>
+  <SelectableTile light value="option1">
     Multi-select Tile
   </SelectableTile>
-  <SelectableTile light selected>
+  <SelectableTile light value="option2">
     Multi-select Tile
   </SelectableTile>
-  <SelectableTile light>
+  <SelectableTile light value="option3">
     Multi-select Tile
   </SelectableTile>
-</div>
+</SelectableTileGroup>
 
 ## Disabled state
 
-Disable tiles to prevent interaction.
+Disable specific tiles to prevent interaction.
 
-<div role="group" aria-label="selectable tiles">
-  <SelectableTile selected>
+<SelectableTileGroup legend="Select options" name="options-disabled" selected={["option1"]}>
+  <SelectableTile value="option1">
     Multi-select Tile
   </SelectableTile>
-  <SelectableTile disabled>
+  <SelectableTile disabled value="option2">
     Multi-select Tile
   </SelectableTile>
-  <SelectableTile disabled>
+  <SelectableTile disabled value="option3">
     Multi-select Tile
   </SelectableTile>
-</div>
+</SelectableTileGroup>

docs/src/pages/framed/SelectableTile/SelectableTileReactive.svelte

@@ -0,0 +1,35 @@
+<script>
+  import {
+    Button,
+    SelectableTile,
+    SelectableTileGroup,
+  } from "carbon-components-svelte";
+
+  const values = ["Lite plan", "Standard plan", "Plus plan"];
+
+  let selected = [values[0], values[1]];
+</script>
+
+<SelectableTileGroup legend="Service pricing tiers" name="plan" bind:selected>
+  {#each values as value}
+    <SelectableTile {value}>{value}</SelectableTile>
+  {/each}
+</SelectableTileGroup>
+
+<div>
+  Selected: <strong>{selected.join(", ") || "None"}</strong>
+</div>
+
+<Button
+  size="small"
+  disabled={selected.length === 1 && selected[0] === values[1]}
+  on:click={() => (selected = [values[1]])}
+>
+  Set to "{values[1]}" only
+</Button>
+
+<style>
+  div {
+    margin: var(--cds-spacing-05) 0;
+  }
+</style>