@spectrum-web-components/table 0.37.0 → 0.39.0

package/README.md

@@ -45,10 +45,8 @@ import {
 
 ## Example
 
-To ensure that the table scrolls, make sure to add a `style` attribute to `<sp-table>` with your desired height. Otherwise, the table will automatically show all its items.
-
 ```html
-<sp-table size="m">
+<sp-table>
     <sp-table-head>
         <sp-table-head-cell>Column Title</sp-table-head-cell>
         <sp-table-head-cell>Column Title</sp-table-head-cell>
@@ -94,10 +92,8 @@ When `selects="single"`, the `<sp-table>` will manage a _single_ selection in th
 
 ```html
 <sp-table
-    size="m"
     selects="single"
     selected='["row1"]'
-    style="height: 200px"
     onchange="spAlert(this, `Selected: ${JSON.stringify(this.selected)}`)"
 >
     <sp-table-head>
@@ -137,12 +133,10 @@ When `selects="single"`, the `<sp-table>` will manage a _single_ selection in th
 
 ### `selects="multiple"`
 
-When `selects="multiple"`, the `<sp-table>` will manage a selection in the array value of `selected` in via a presence toggle. Additionally, an `<sp-table-checkbox-cell>` will be made available in the `<sp-table-head>` in order to select/deselect all items in the `<sp-table>`.
+When `selects="multiple"`, the `<sp-table>` manages selections via a presence toggle and adds them to the `selected` array. Additionally, an `<sp-table-checkbox-cell>` will be made available in the `<sp-table-head>` in order to select/deselect all items in the `<sp-table>`.
 
 ```html
 <sp-table
-    size="m"
-    style="height: 200px"
     selects="multiple"
     selected='["row1", "row2"]'
     onchange="spAlert(this, `Selected: ${JSON.stringify(this.selected)}`)"
@@ -182,13 +176,273 @@ When `selects="multiple"`, the `<sp-table>` will manage a selection in the array
 </sp-table>
 ```
 
+## Emphasized
+
+Use the `emphasized` attribute to add priority to the information that is delivered within your `<table>` element. In particular, this affects the appearance of selected rows, and will set the emphasized style for the checkboxes within `sp-table-checkbox-cell`.
+Leaving off the `emphasized` attribute will display the non-emphasized colors.
+
+```html
+<sp-table emphasized selects="multiple" selected='["row1"]'>
+    <sp-table-head>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+    </sp-table-head>
+    <sp-table-body>
+        <sp-table-row value="row1">
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row2">
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row3">
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+        </sp-table-row>
+    </sp-table-body>
+</sp-table>
+```
+
+## Density
+
+The optional `density` property changes the spacing around table cell content from the "regular" default. It accepts the values of `compact` or `spacious`.
+
+<sp-tabs selected="compact" auto label="Density Attribute Options">
+<sp-tab value="compact">Compact</sp-tab>
+<sp-tab-panel value="compact">
+
+```html
+<sp-table density="compact">
+    <sp-table-head>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+    </sp-table-head>
+    <sp-table-body>
+        <sp-table-row value="row1">
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row2">
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row3">
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+        </sp-table-row>
+    </sp-table-body>
+</sp-table>
+```
+
+</sp-tab-panel>
+<sp-tab value="spacious">Spacious</sp-tab>
+<sp-tab-panel value="spacious">
+
+```html
+<sp-table density="spacious">
+    <sp-table-head>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+    </sp-table-head>
+    <sp-table-body>
+        <sp-table-row value="row1">
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row2">
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row3">
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+        </sp-table-row>
+    </sp-table-body>
+</sp-table>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+## Sizes
+
+<sp-tabs selected="s" auto label="Size Attribute Options">
+<sp-tab value="s">Small</sp-tab>
+<sp-tab-panel value="s">
+
+```html
+<sp-table size="s">
+    <sp-table-head>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+    </sp-table-head>
+    <sp-table-body>
+        <sp-table-row value="row1">
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row2">
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row3">
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+        </sp-table-row>
+    </sp-table-body>
+</sp-table>
+```
+
+</sp-tab-panel>
+<sp-tab value="m">Medium (Default)</sp-tab>
+<sp-tab-panel value="m">
+
+```html
+<sp-table>
+    <sp-table-head>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+    </sp-table-head>
+    <sp-table-body>
+        <sp-table-row value="row1">
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row2">
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row3">
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+        </sp-table-row>
+    </sp-table-body>
+</sp-table>
+```
+
+</sp-tab-panel>
+<sp-tab value="l">Large</sp-tab>
+<sp-tab-panel value="l">
+
+```html
+<sp-table size="l">
+    <sp-table-head>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+    </sp-table-head>
+    <sp-table-body>
+        <sp-table-row value="row1">
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row2">
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row3">
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+        </sp-table-row>
+    </sp-table-body>
+</sp-table>
+```
+
+</sp-tab-panel>
+<sp-tab value="xl">Extra Large</sp-tab>
+<sp-tab-panel value="xl">
+
+```html
+<sp-table size="xl">
+    <sp-table-head>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+    </sp-table-head>
+    <sp-table-body>
+        <sp-table-row value="row1">
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row2">
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row3">
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+        </sp-table-row>
+    </sp-table-body>
+</sp-table>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+## Quiet
+
+When using the `quiet` property, the overall look of the table will change. The quiet variant of Table has a transparent background and no borders on the left and right.
+
+```html
+<sp-table quiet>
+    <sp-table-head>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+        <sp-table-head-cell>Column Title</sp-table-head-cell>
+    </sp-table-head>
+    <sp-table-body>
+        <sp-table-row value="row1">
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+            <sp-table-cell>Row Item Alpha</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row2">
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+            <sp-table-cell>Row Item Bravo</sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row3">
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+            <sp-table-cell>Row Item Charlie</sp-table-cell>
+        </sp-table-row>
+    </sp-table-body>
+</sp-table>
+```
+
 ## Virtualized Table
 
 For large amounts of data, the `<sp-table>` can be virtualised to easily add table rows by using properties.
 
 ```html-live
 <sp-table
-    size="m"
     id="table-virtualized-demo"
     style="height: 200px"
     scroller="true"
@@ -246,8 +500,11 @@ For large amounts of data, the `<sp-table>` can be virtualised to easily add tab
         return items;
     }
 
-    const initTable = () => {
+    const initTable = async () => {
         const table = document.querySelector('#table-virtualized-demo');
+
+        await table.updateComplete;
+        await table.closest('code-example')?.updateComplete;
         table.items = initItems(50);
 
         table.renderItem = (item, index) => { 
@@ -260,8 +517,10 @@ For large amounts of data, the `<sp-table>` can be virtualised to easily add tab
             return [cell1, cell2, cell3];
         }
     };
-    customElements.whenDefined('sp-table').then(() => {
-        initTable();
+    customElements.whenDefined('code-example').then(() => {
+        customElements.whenDefined('sp-table').then(() => {
+            initTable();
+        });
     });
 </script>
 
@@ -306,7 +565,6 @@ By default the `selected` property will surface an array of item indexes that ar
 
 ```html-live
 <sp-table
-    size="m"
     id="table-item-value-demo"
     style="height: 200px"
     scroller="true"
@@ -373,8 +631,11 @@ By default the `selected` property will surface an array of item indexes that ar
         return items;
     }
 
-    const initTable = () => {
+    const initTable = async () => {
         const table = document.querySelector('#table-item-value-demo');
+
+        await table.updateComplete;
+        await table.closest('code-example')?.updateComplete;
         table.items = initItems(50);
         table.itemValue = (item) => item.id;
 
@@ -393,8 +654,10 @@ By default the `selected` property will surface an array of item indexes that ar
             selected.textContent = `Selected: ${JSON.stringify(event.target.selected, null, ' ')}`;
         });
     };
-    customElements.whenDefined('sp-table').then(() => {
-        initTable();
+    customElements.whenDefined('code-example').then(() => {
+        customElements.whenDefined('sp-table').then(() => {
+            initTable();
+        });
     });
 </script>
 
@@ -404,7 +667,6 @@ All values in the item array are assumed to be homogenous by default. This means
 
 ```html-live
 <sp-table
-    size="m"
     id="table-row-type-demo"
     style="height: 200px"
     scroller="true"
@@ -472,8 +734,11 @@ All values in the item array are assumed to be homogenous by default. This means
         return items;
     }
 
-    const initTable = () => {
+    const initTable = async () => {
         const table = document.querySelector('#table-row-type-demo');
+
+        await table.updateComplete;
+        await table.closest('code-example')?.updateComplete;
         const items = initItems(50);
         items.splice(3, 0, {
             _$rowType$: 1,
@@ -496,8 +761,10 @@ All values in the item array are assumed to be homogenous by default. This means
             return [cell1, cell2, cell3];
         };
     };
-    customElements.whenDefined('sp-table').then(() => {
-        initTable();
+    customElements.whenDefined('code-example').then(() => {
+        customElements.whenDefined('sp-table').then(() => {
+            initTable();
+        });
     });
 </script>
 
@@ -513,7 +780,6 @@ For each table column you want to sort, use the `sortable` attribute in its resp
 
 ```html-live
 <sp-table
-    size="m"
     id="sorted-virtualized-table"
     style="height: 200px"
     scroller="true"
@@ -591,9 +857,12 @@ For each table column you want to sort, use the `sortable` attribute in its resp
 
     let items = initItems(50);
 
-    const initTable = () => {
+    const initTable = async () => {
         const table = document.querySelector('#sorted-virtualized-table');
 
+        await table.updateComplete;
+        await table.closest('code-example')?.updateComplete;
+
         table.items = items;
 
         table.renderItem = (item, index) => { 
@@ -618,7 +887,9 @@ For each table column you want to sort, use the `sortable` attribute in its resp
         });
     };
 
-    customElements.whenDefined('sp-table').then(() => {
-        initTable();
+    customElements.whenDefined('code-example').then(() => {
+        customElements.whenDefined('sp-table').then(() => {
+            initTable();
+        });
     });
 </script>

package/custom-elements.json

@@ -200,6 +200,41 @@
               "attribute": "scroller",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "emphasized",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Deliver the Table with additional visual emphasis to selected rows.",
+              "attribute": "emphasized",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "quiet",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Display with \"quiet\" variant styles.",
+              "attribute": "quiet",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "density",
+              "type": {
+                "text": "'compact' | 'spacious' | undefined"
+              },
+              "privacy": "public",
+              "description": "Changes the spacing around table cell content.",
+              "attribute": "density",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "tableBody",
@@ -445,6 +480,32 @@
               "default": "false",
               "description": "Whether or not the virtualized table has a scroll bar. If this is set to true, make sure to specify a height in the sp-table's inline styles.",
               "fieldName": "scroller"
+            },
+            {
+              "name": "emphasized",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Deliver the Table with additional visual emphasis to selected rows.",
+              "fieldName": "emphasized"
+            },
+            {
+              "name": "quiet",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Display with \"quiet\" variant styles.",
+              "fieldName": "quiet"
+            },
+            {
+              "name": "density",
+              "type": {
+                "text": "'compact' | 'spacious' | undefined"
+              },
+              "description": "Changes the spacing around table cell content.",
+              "fieldName": "density"
             }
           ],
           "mixins": [
@@ -591,6 +652,18 @@
           "description": "",
           "name": "TableCheckboxCell",
           "members": [
+            {
+              "kind": "field",
+              "name": "headCell",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether or not the checkbox cell is in the table head.",
+              "attribute": "head-cell",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "role",
@@ -651,6 +724,17 @@
               "attribute": "selects-single",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "emphasized",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "emphasized",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "click",
@@ -663,6 +747,15 @@
             }
           ],
           "attributes": [
+            {
+              "name": "head-cell",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether or not the checkbox cell is in the table head.",
+              "fieldName": "headCell"
+            },
             {
               "name": "role",
               "type": {
@@ -702,6 +795,14 @@
               },
               "default": "false",
               "fieldName": "selectsSingle"
+            },
+            {
+              "name": "emphasized",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "emphasized"
             }
           ],
           "superclass": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/table",
-    "version": "0.37.0",
+    "version": "0.39.0",
     "publishConfig": {
         "access": "public"
     },
@@ -116,14 +116,14 @@
     ],
     "dependencies": {
         "@lit-labs/observers": "^2.0.0",
-        "@lit-labs/virtualizer": "^2.0.2",
-        "@spectrum-web-components/base": "^0.37.0",
-        "@spectrum-web-components/checkbox": "^0.37.0",
-        "@spectrum-web-components/icon": "^0.37.0",
-        "@spectrum-web-components/icons-ui": "^0.37.0"
+        "@lit-labs/virtualizer": "^2.0.6",
+        "@spectrum-web-components/base": "^0.39.0",
+        "@spectrum-web-components/checkbox": "^0.39.0",
+        "@spectrum-web-components/icon": "^0.39.0",
+        "@spectrum-web-components/icons-ui": "^0.39.0"
     },
     "devDependencies": {
-        "@spectrum-css/table": "^4.0.66"
+        "@spectrum-css/table": "^5.0.1"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
@@ -132,5 +132,5 @@
         "./elements.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "d771f62f0d8063070af43283bb0fd5e3400bad06"
+    "gitHead": "2acc8390ef0ac6cc940958d4da705c9859155c0d"
 }

package/src/Table.d.ts

@@ -46,6 +46,18 @@ export declare class Table extends Table_base {
      * Whether or not the virtualized table has a scroll bar. If this is set to true, make sure to specify a height in the sp-table's inline styles.
      */
     scroller: boolean;
+    /**
+     * Deliver the Table with additional visual emphasis to selected rows.
+     */
+    emphasized: boolean;
+    /**
+     * Display with "quiet" variant styles.
+     */
+    quiet: boolean;
+    /**
+     * Changes the spacing around table cell content.
+     */
+    density?: 'compact' | 'spacious';
     private tableBody?;
     private tableHeadCheckboxCell?;
     private get tableHead();