Some fixes

COMPONENT_INDEX.md

@@ -2697,8 +2697,8 @@ None.
 | Prop name       | Kind             | Reactive | Type                                      | Default value                                    | Description                                              |
 | :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------------- |
 | ref             | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element             |
-| light           | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant                |
 | checked         | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to check the tile                          |
+| light           | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant                |
 | value           | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the value of the radio input                     |
 | title           | <code>let</code> | No       | <code>string</code>                       | <code>"title"</code>                             | Specify the title of the selectable tile                 |
 | tabindex        | <code>let</code> | No       | <code>string</code>                       | <code>"0"</code>                                 | Specify the tabindex                                     |
@@ -2727,12 +2727,11 @@ None.
 
 ### Props
 
-| Prop name     | Kind             | Reactive | Type                 | Default value      | Description                               |
+| Prop name     | Kind             | Reactive | Type                 | Default value      | Description                             |
-| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
+| :------------ | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
-| selectedValue | <code>let</code> | Yes      | <code>string</code>  | --                 | Specify the selected tile value           |
+| selectedValue | <code>let</code> | Yes      | <code>string</code>  | --                 | Specify the selected tile value         |
-| disabled      | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group   |
+| disabled      | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group |
-| light         | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
+| legend        | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the legend text                 |
-| legend        | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the legend text                   |
 
 ### Slots
 
@@ -2931,8 +2930,8 @@ None.
 | Prop name       | Kind             | Reactive | Type                                      | Default value                                    | Description                                                   |
 | :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
 | ref             | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element                  |
-| light           | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant                     |
 | selected        | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to select the tile                              |
+| light           | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant                     |
 | title           | <code>let</code> | No       | <code>string</code>                       | <code>"title"</code>                             | Specify the title of the selectable tile                      |
 | value           | <code>let</code> | No       | <code>string</code>                       | <code>"value"</code>                             | Specify the value of the selectable tile                      |
 | tabindex        | <code>let</code> | No       | <code>string</code>                       | <code>"0"</code>                                 | Specify the tabindex                                          |

docs/src/COMPONENT_API.json

@@ -3356,7 +3356,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "table" }
       ],
       "typedefs": [],
-      "rest_props": { "type": "Element", "name": "div" },
+      "rest_props": { "type": "Element", "name": "table" },
       "extends": {
         "interface": "DataTableHeader",
         "import": "\"../DataTable/DataTable\""
@@ -8534,7 +8534,7 @@
           "value": "false",
           "isFunction": false,
           "constant": false,
-          "reactive": true
+          "reactive": false
         },
         {
           "name": "title",
@@ -8640,7 +8640,7 @@
           "value": "false",
           "isFunction": false,
           "constant": false,
-          "reactive": true
+          "reactive": false
         },
         {
           "name": "value",
@@ -8787,16 +8787,6 @@
           "constant": false,
           "reactive": false
         },
-        {
-          "name": "light",
-          "kind": "let",
-          "description": "Set to `true` to enable the light variant",
-          "type": "boolean",
-          "value": "false",
-          "isFunction": false,
-          "constant": false,
-          "reactive": false
-        },
         {
           "name": "legend",
           "kind": "let",

docs/src/pages/components/RadioTile.svx

@@ -29,14 +29,14 @@ components: ["RadioTileGroup", "RadioTile"]
 
 ### Light variant
 
-<RadioTileGroup light legend="Service pricing tiers">
+<RadioTileGroup legend="Service pricing tiers">
-  <RadioTile value="0" checked>
+  <RadioTile light  value="0" checked>
     Lite plan
   </RadioTile>
-  <RadioTile value="1">
+  <RadioTile light  value="1">
     Standard plan
   </RadioTile>
-  <RadioTile value="2">
+  <RadioTile light  value="2">
     Plus plan
   </RadioTile>
 </TileGroup>

docs/src/pages/components/SelectableTile.svx

@@ -9,34 +9,34 @@ components: ["SelectableTile", "SelectableTileGroup"]
 
 ### Multi-selectable tiles
 
-<SelectableTileGroup legend="Select the options you require" light>
+<SelectableTileGroup legend="Select the options you require">
   <SelectableTile title="Option 1" selected>
     Option 1
   </SelectableTile>
   <SelectableTile title="Option 2" selected>
     Option 2
   </SelectableTile>
-  <SelectableTile title="Option 3£>
+  <SelectableTile title="Option 3">
     Option 3
   </SelectableTile>
-    <SelectableTile light title="Option 4£>
+    <SelectableTile light title="Option 4">
     Option 4 (light variant)
   </SelectableTile>
 </div>
 
 ### Multi-selectable tiles with light variant
 
-<SelectableTileGroup light legend="Select the options you require" light>
+<SelectableTileGroup  legend="Select the options you require" light>
-  <SelectableTile title="Option 1" selected>
+  <SelectableTile light title="Option 1" selected>
     Option 1
   </SelectableTile>
-  <SelectableTile title="Option 2" selected>
+  <SelectableTile light title="Option 2" selected>
     Option 2
   </SelectableTile>
-  <SelectableTile title="Option 3£>
+  <SelectableTile light title="Option 3">
     Option 3
   </SelectableTile>
-    <SelectableTile title="Option 4£>
+    <SelectableTile light title="Option 4">
     Option 4
   </SelectableTile>
 </div>

src/DataTableSkeleton/DataTableSkeleton.svelte

@@ -41,11 +41,7 @@
   );
 </script>
 
-<div
+<div class:bx--skeleton="{true}" class:bx--data-table-container="{true}">
-  class:bx--skeleton="{true}"
-  class:bx--data-table-container="{true}"
-  {...$$restProps}
->
   {#if showHeader}
     <div class:bx--data-table-header="{true}">
       <div class:bx--data-table-header__title="{true}"></div>
@@ -64,6 +60,7 @@
     </section>
   {/if}
   <table
+    {...$$restProps}
     class:bx--skeleton="{true}"
     class:bx--data-table="{true}"
     class:bx--data-table--compact="{size === 'compact'}"
@@ -74,6 +71,7 @@
     on:mouseover
     on:mouseenter
     on:mouseleave
+    {...$$restProps}
   >
     <thead>
       <tr>

src/Tile/RadioTile.svelte

@@ -29,9 +29,7 @@
   import { getContext } from "svelte";
   import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
 
-  const { _light, add, update, selectedValue } = getContext("RadioTileGroup");
+  const { add, update, selectedValue } = getContext("RadioTileGroup");
-
-  light = light || _light;
 
   add({ value, checked });
 

src/Tile/RadioTileGroup.svelte

@@ -8,9 +8,6 @@
   /** Set to `true` to disable the tile group */
   export let disabled = false;
 
-  /** Set to `true` to enable the light variant */
-  export let light = false;
-
   /** Specify the legend text */
   export let legend = "";
 
@@ -21,7 +18,6 @@
   const _selectedValue = writable(selectedValue);
 
   setContext("RadioTileGroup", {
-    _light: light,
     selectedValue: _selectedValue,
     add: ({ checked, value }) => {
       if (checked) {

src/Tile/SelectableTile.svelte

@@ -32,9 +32,7 @@
   import { getContext } from "svelte";
   import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
 
-  const { _light, update, selectedValues } = getContext("SelectableTileGroup");
+  const { update, selectedValues } = getContext("SelectableTileGroup");
-
-  light = light || _light;
 
   update({ value, selected });
 

types/DataTableSkeleton/DataTableSkeleton.d.ts

@@ -3,7 +3,7 @@ import { DataTableHeader } from "../DataTable/DataTable";
 
 export interface DataTableSkeletonProps
   extends DataTableHeader,
-    svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+    svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["table"]> {
   /**
    * Specify the number of columns
    * Superseded by `headers` if `headers` is a non-empty array

types/Tile/RadioTileGroup.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="svelte" />
+
+export interface RadioTileGroupProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["fieldset"]> {
+  /**
+   * Specify the selected tile value
+   */
+  selectedValue?: string;
+
+  /**
+   * Set to `true` to disable the tile group
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the legend text
+   * @default ""
+   */
+  legend?: string;
+}
+
+export default class RadioTileGroup {
+  $$prop_def: RadioTileGroupProps;
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "select", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Tile/SelectableTileGroup.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="svelte" />
+
+export interface SelectableTileGroupProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["fieldset"]> {
+  /**
+   * Specify the selected tile's
+   * @default []
+   */
+  selectedValues?: string;
+
+  /**
+   * Set to `true` to disable the tile group
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Specify the legend text
+   * @default ""
+   */
+  legend?: string;
+}
+
+export default class SelectableTileGroup {
+  $$prop_def: SelectableTileGroupProps;
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "select", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}