@swiftwc/ui 0.0.0-dev.50 → 0.0.0-dev.52

package/generated/components/h-stack.d.ts

@@ -0,0 +1,10 @@
+/**
+ *
+ * @attr {@spacingSet} spacing - The gap between the primary axis
+ *
+ */
+export declare class HStack extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/generated/components/h-stack.js

@@ -0,0 +1,19 @@
+import { devFlags } from '../internal/utils';
+/**
+ *
+ * @attr {@spacingSet} spacing - The gap between the primary axis
+ *
+ */
+export class HStack extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${HStack.name} ⚡️ connect`);
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${HStack.name} ⚡️ disconnect`);
+    }
+}

package/generated/components/index.d.ts

@@ -11,6 +11,7 @@ export * from './fine-tooltip';
 export * from './form-view';
 export * from './glass-button';
 export * from './glass-prominent-button';
+export * from './h-stack';
 export * from './image-view';
 export * from './label-view';
 export * from './list-view';

package/generated/components/index.js

@@ -11,6 +11,7 @@ export * from './fine-tooltip';
 export * from './form-view';
 export * from './glass-button';
 export * from './glass-prominent-button';
+export * from './h-stack';
 export * from './image-view';
 export * from './label-view';
 export * from './list-view';

package/generated/components/table-view.d.ts

@@ -1,5 +1,7 @@
 /**
  * @summary Display selectable, sortable data arranged in rows and columns.
+ *
+ * @attr {title:trailing:subtitle|trailing:title:subtitle|title:subtitle:trailing|*} preferred-compact-template - Sets the template areas when the table is in compact mode
  */
 export declare class TableView extends HTMLElement {
     #private;

package/generated/components/table-view.js

@@ -2,10 +2,12 @@ var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
-import { $, devFlags, listActive, onoff } from '../internal/utils';
+import { $, devFlags, listActive, onoff, renderLabelTitle } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 /**
  * @summary Display selectable, sortable data arranged in rows and columns.
+ *
+ * @attr {title:trailing:subtitle|trailing:title:subtitle|title:subtitle:trailing|*} preferred-compact-template - Sets the template areas when the table is in compact mode
  */
 export class TableView extends HTMLElement {
     #styleObserver;
@@ -54,35 +56,6 @@ export class TableView extends HTMLElement {
             this.#slots = new Map();
         });
         this.#slots?.get('column')?.addEventListener('slotchange', this.#handleColumnSlotchange);
-        // this.append(
-        //   document.createRange().createContextualFragment(`<menu-view slot="header-trailing">
-        //               <label-view slot="label" title="Delete"></label-view>
-        //               <button type="button" tabindex="0">
-        //                 <label-view system-image="dots-three" title="Scan Documents"></label-view>
-        //               </button>
-        //               <button type="button" tabindex="0">
-        //                 <label-view system-image="dots-three" title="Connect to Server"></label-view>
-        //               </button>
-        //               <button type="button" tabindex="0">
-        //                 <label-view title="Edit Sidebar"></label-view>
-        //               </button>
-        //             </menu-view>
-        //             `)
-        // $(`<menu-view slot="header-trailing">
-        //             <label-view slot="label" title="Delete"></label-view>
-        //             <button type="button" tabindex="0">
-        //               <label-view system-image="dots-three" title="Scan Documents"></label-view>
-        //             </button>
-        //             <button type="button" tabindex="0">
-        //               <label-view system-image="dots-three" title="Connect to Server"></label-view>
-        //             </button>
-        //             <button type="button" tabindex="0">
-        //               <label-view title="Edit Sidebar"></label-view>
-        //             </button>
-        //           </menu-view>
-        //           <div slot="footer-leading">22</div>
-        //           <div slot="footer-trailing"><button>&lt;</button> <button>&gt;</button></div>`)
-        // )
     }
     disconnectedCallback() {
         if (devFlags.debug)
@@ -96,7 +69,6 @@ export class TableView extends HTMLElement {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff(listActive(this), this).on());
-        // console.log(999, this.#shadowRoot.querySelector('[part*=table-column-stack]'))
         this.#styleObserver = new CSSStyleObserver({
             properties: ['--adaptable-table-style-index'],
         });
@@ -134,8 +106,10 @@ export class TableView extends HTMLElement {
           <label-view font="callout" foreground="secondary"></label-view>
         </v-stack>
       </button>`, '>1'), title = btn.querySelector('label-view:first-child'), subTitle = btn.querySelector('label-view:last-child');
-            title?.setAttribute('title', node.textContent.trim());
-            subTitle?.setAttribute('title', node.ariaSort ?? '');
+            if (title)
+                renderLabelTitle(title, node.textContent.trim()); //title?.setAttribute('title', node.textContent.trim())
+            if (subTitle)
+                renderLabelTitle(subTitle, node.ariaSort ?? ''); //subTitle?.setAttribute('title', node.ariaSort ?? '')
             this.#compactToolbarItem.appendChild(btn);
         }
     };
@@ -150,16 +124,19 @@ export class TableView extends HTMLElement {
         const adaptableTableStyle = style.getPropertyValue('--adaptable-table-style') || 'compact';
         switch (adaptableTableStyle) {
             case 'expanded':
-                if (!this.#compactToolbarItem?.isConnected)
-                    break;
-                this.#compactToolbarItem?.remove();
+                if (this.#compactToolbarItem?.isConnected)
+                    this.#compactToolbarItem?.remove();
                 break;
             default:
                 if (!this.#compactToolbarItem)
                     break;
-                if (this.#compactToolbarItem?.isConnected)
+                if (!this.#slots
+                    ?.get('column')
+                    ?.assignedElements()
+                    .filter((el) => el.matches(':is(button[is=table-column])')).length)
                     break;
-                this.insertAdjacentElement('beforeend', this.#compactToolbarItem);
+                if (!this.#compactToolbarItem?.isConnected)
+                    this.insertAdjacentElement('beforeend', this.#compactToolbarItem);
                 break;
         }
     };
@@ -169,8 +146,7 @@ export class TableView extends HTMLElement {
         const btn = target.closest('button');
         if (!btn)
             return;
-        const siblings = [...(btn.parentNode?.querySelectorAll(':scope>button') ?? [])];
-        const index = siblings.indexOf(btn);
+        const siblings = [...(btn.parentNode?.querySelectorAll(':scope>button') ?? [])], index = siblings.indexOf(btn);
         this.querySelector(`:scope>[slot=column]:nth-of-type(${index + 1})`)?.click();
     };
 }

package/generated/components/v-stack.d.ts

@@ -2,6 +2,9 @@
  * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution - The distribution of cols
  *
  * @attr {"auto spacer"|"auto auto spacer"|"auto auto auto spacer"} template
+ *
+ * @attr {@spacingSet} spacing - The gap between the primary axis
+ *
  */
 export declare class VStack extends HTMLElement {
     constructor();

package/generated/components/v-stack.js

@@ -3,6 +3,9 @@ import { devFlags } from '../internal/utils';
  * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution - The distribution of cols
  *
  * @attr {"auto spacer"|"auto auto spacer"|"auto auto auto spacer"} template
+ *
+ * @attr {@spacingSet} spacing - The gap between the primary axis
+ *
  */
 export class VStack extends HTMLElement {
     constructor() {

package/generated/css/index.css

@@ -4248,7 +4248,8 @@
     column-gap: var(--table-col-gap);
     padding-inline: var(--list--host-padding-inline, 0px);
     padding-block: var(--table-row-gap);
-    color: var(--blue);
+    font-size: 0.875rem;
+    font-weight: 600;
     background-color: var(--separator);
   }
   :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > [slot^=header],
@@ -4280,12 +4281,21 @@
   :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)) {
     --table--expanded-columns: 1;
   }
-  :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view):has(> [slot=column]:nth-of-type(2)):not(:has(> [slot=column]:nth-of-type(3)))) {
+  :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)):has(> [slot=column]:nth-child(2 of [slot=column])) {
     --table--expanded-columns: 2;
   }
-  :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view):has(> [slot=column]:nth-of-type(3)):not(:has(> [slot=column]:nth-of-type(4)))) {
+  :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)):has(> [slot=column]:nth-child(3 of [slot=column])) {
     --table--expanded-columns: 3;
   }
+  :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)):has(> [slot=column]:nth-child(4 of [slot=column])) {
+    --table--expanded-columns: 4;
+  }
+  :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)):has(> [slot=column]:nth-child(5 of [slot=column])) {
+    --table--expanded-columns: 5;
+  }
+  :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)):has(> [slot=column]:nth-child(6 of [slot=column])) {
+    --table--expanded-columns: 6;
+  }
   :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)) {
     --list--host-background-color: var(--list-background-color, );
     --list--highlighteditem-background-color: var(--list-highlighteditem-background-color, );
@@ -4484,6 +4494,25 @@
       grid-area: subtitle;
       grid-column: 1/-1;
     }
+    :where(table-view[preferred-compact-template="title:subtitle:trailing"] > [is=table-row]) {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: repeat(2, auto);
+      grid-template-areas: "title trailing" "subtitle _";
+    }
+    :where(table-view[preferred-compact-template="title:subtitle:trailing"] > [is=table-row] > :nth-child(-n+3)) {
+      display: grid;
+    }
+    :where(table-view[preferred-compact-template="title:subtitle:trailing"] > [is=table-row] > :nth-child(1)) {
+      grid-area: title;
+    }
+    :where(table-view[preferred-compact-template="title:subtitle:trailing"] > [is=table-row] > :nth-child(2)) {
+      grid-area: subtitle;
+    }
+    :where(table-view[preferred-compact-template="title:subtitle:trailing"] > [is=table-row] > :nth-child(3)) {
+      grid-area: trailing;
+      place-self: end;
+      grid-column: 1/-1;
+    }
     :where(table-view[preferred-compact-template="*"] > [is=table-row] > :nth-child(n+2)) {
       display: grid;
     }
@@ -4496,6 +4525,7 @@
     grid-template-columns: auto var(--table-accessory-size);
     place-content: start;
     place-items: center;
+    color: var(--blue);
   }
   :where([is=table-column][aria-sort])::after {
     pointer-events: none;
@@ -6171,160 +6201,212 @@
     justify-items: stretch  ;
     justify-content: stretch  ;
   }
-  :where(v-stack[spacing="0"]) {
+  :where(v-stack[spacing="0"],
+  h-stack[spacing="0"]) {
     gap: 0rem;
   }
-  :where(v-stack[spacing="1"]) {
+  :where(v-stack[spacing="1"],
+  h-stack[spacing="1"]) {
     gap: 0.1rem;
   }
-  :where(v-stack[spacing="2"]) {
+  :where(v-stack[spacing="2"],
+  h-stack[spacing="2"]) {
     gap: 0.2rem;
   }
-  :where(v-stack[spacing="3"]) {
+  :where(v-stack[spacing="3"],
+  h-stack[spacing="3"]) {
     gap: 0.3rem;
   }
-  :where(v-stack[spacing="4"]) {
+  :where(v-stack[spacing="4"],
+  h-stack[spacing="4"]) {
     gap: 0.4rem;
   }
-  :where(v-stack[spacing="5"]) {
+  :where(v-stack[spacing="5"],
+  h-stack[spacing="5"]) {
     gap: 0.5rem;
   }
-  :where(v-stack[spacing="6"]) {
+  :where(v-stack[spacing="6"],
+  h-stack[spacing="6"]) {
     gap: 0.6rem;
   }
-  :where(v-stack[spacing="7"]) {
+  :where(v-stack[spacing="7"],
+  h-stack[spacing="7"]) {
     gap: 0.7rem;
   }
-  :where(v-stack[spacing="8"]) {
+  :where(v-stack[spacing="8"],
+  h-stack[spacing="8"]) {
     gap: 0.8rem;
   }
-  :where(v-stack[spacing="9"]) {
+  :where(v-stack[spacing="9"],
+  h-stack[spacing="9"]) {
     gap: 0.9rem;
   }
-  :where(v-stack[spacing="10"]) {
+  :where(v-stack[spacing="10"],
+  h-stack[spacing="10"]) {
     gap: 1rem;
   }
-  :where(v-stack[spacing="11"]) {
+  :where(v-stack[spacing="11"],
+  h-stack[spacing="11"]) {
     gap: 1.1rem;
   }
-  :where(v-stack[spacing="12"]) {
+  :where(v-stack[spacing="12"],
+  h-stack[spacing="12"]) {
     gap: 1.2rem;
   }
-  :where(v-stack[spacing="13"]) {
+  :where(v-stack[spacing="13"],
+  h-stack[spacing="13"]) {
     gap: 1.3rem;
   }
-  :where(v-stack[spacing="14"]) {
+  :where(v-stack[spacing="14"],
+  h-stack[spacing="14"]) {
     gap: 1.4rem;
   }
-  :where(v-stack[spacing="15"]) {
+  :where(v-stack[spacing="15"],
+  h-stack[spacing="15"]) {
     gap: 1.5rem;
   }
-  :where(v-stack[spacing="16"]) {
+  :where(v-stack[spacing="16"],
+  h-stack[spacing="16"]) {
     gap: 1.6rem;
   }
-  :where(v-stack[spacing="17"]) {
+  :where(v-stack[spacing="17"],
+  h-stack[spacing="17"]) {
     gap: 1.7rem;
   }
-  :where(v-stack[spacing="18"]) {
+  :where(v-stack[spacing="18"],
+  h-stack[spacing="18"]) {
     gap: 1.8rem;
   }
-  :where(v-stack[spacing="19"]) {
+  :where(v-stack[spacing="19"],
+  h-stack[spacing="19"]) {
     gap: 1.9rem;
   }
-  :where(v-stack[spacing="20"]) {
+  :where(v-stack[spacing="20"],
+  h-stack[spacing="20"]) {
     gap: 2rem;
   }
-  :where(v-stack[spacing="21"]) {
+  :where(v-stack[spacing="21"],
+  h-stack[spacing="21"]) {
     gap: 2.1rem;
   }
-  :where(v-stack[spacing="22"]) {
+  :where(v-stack[spacing="22"],
+  h-stack[spacing="22"]) {
     gap: 2.2rem;
   }
-  :where(v-stack[spacing="23"]) {
+  :where(v-stack[spacing="23"],
+  h-stack[spacing="23"]) {
     gap: 2.3rem;
   }
-  :where(v-stack[spacing="24"]) {
+  :where(v-stack[spacing="24"],
+  h-stack[spacing="24"]) {
     gap: 2.4rem;
   }
-  :where(v-stack[spacing="25"]) {
+  :where(v-stack[spacing="25"],
+  h-stack[spacing="25"]) {
     gap: 2.5rem;
   }
-  :where(v-stack[spacing="26"]) {
+  :where(v-stack[spacing="26"],
+  h-stack[spacing="26"]) {
     gap: 2.6rem;
   }
-  :where(v-stack[spacing="27"]) {
+  :where(v-stack[spacing="27"],
+  h-stack[spacing="27"]) {
     gap: 2.7rem;
   }
-  :where(v-stack[spacing="28"]) {
+  :where(v-stack[spacing="28"],
+  h-stack[spacing="28"]) {
     gap: 2.8rem;
   }
-  :where(v-stack[spacing="29"]) {
+  :where(v-stack[spacing="29"],
+  h-stack[spacing="29"]) {
     gap: 2.9rem;
   }
-  :where(v-stack[spacing="30"]) {
+  :where(v-stack[spacing="30"],
+  h-stack[spacing="30"]) {
     gap: 3rem;
   }
-  :where(v-stack[spacing="31"]) {
+  :where(v-stack[spacing="31"],
+  h-stack[spacing="31"]) {
     gap: 3.1rem;
   }
-  :where(v-stack[spacing="32"]) {
+  :where(v-stack[spacing="32"],
+  h-stack[spacing="32"]) {
     gap: 3.2rem;
   }
-  :where(v-stack[spacing="33"]) {
+  :where(v-stack[spacing="33"],
+  h-stack[spacing="33"]) {
     gap: 3.3rem;
   }
-  :where(v-stack[spacing="34"]) {
+  :where(v-stack[spacing="34"],
+  h-stack[spacing="34"]) {
     gap: 3.4rem;
   }
-  :where(v-stack[spacing="35"]) {
+  :where(v-stack[spacing="35"],
+  h-stack[spacing="35"]) {
     gap: 3.5rem;
   }
-  :where(v-stack[spacing="36"]) {
+  :where(v-stack[spacing="36"],
+  h-stack[spacing="36"]) {
     gap: 3.6rem;
   }
-  :where(v-stack[spacing="37"]) {
+  :where(v-stack[spacing="37"],
+  h-stack[spacing="37"]) {
     gap: 3.7rem;
   }
-  :where(v-stack[spacing="38"]) {
+  :where(v-stack[spacing="38"],
+  h-stack[spacing="38"]) {
     gap: 3.8rem;
   }
-  :where(v-stack[spacing="39"]) {
+  :where(v-stack[spacing="39"],
+  h-stack[spacing="39"]) {
     gap: 3.9rem;
   }
-  :where(v-stack[spacing="40"]) {
+  :where(v-stack[spacing="40"],
+  h-stack[spacing="40"]) {
     gap: 4rem;
   }
-  :where(v-stack[spacing="41"]) {
+  :where(v-stack[spacing="41"],
+  h-stack[spacing="41"]) {
     gap: 4.1rem;
   }
-  :where(v-stack[spacing="42"]) {
+  :where(v-stack[spacing="42"],
+  h-stack[spacing="42"]) {
     gap: 4.2rem;
   }
-  :where(v-stack[spacing="43"]) {
+  :where(v-stack[spacing="43"],
+  h-stack[spacing="43"]) {
     gap: 4.3rem;
   }
-  :where(v-stack[spacing="44"]) {
+  :where(v-stack[spacing="44"],
+  h-stack[spacing="44"]) {
     gap: 4.4rem;
   }
-  :where(v-stack[spacing="45"]) {
+  :where(v-stack[spacing="45"],
+  h-stack[spacing="45"]) {
     gap: 4.5rem;
   }
-  :where(v-stack[spacing="46"]) {
+  :where(v-stack[spacing="46"],
+  h-stack[spacing="46"]) {
     gap: 4.6rem;
   }
-  :where(v-stack[spacing="47"]) {
+  :where(v-stack[spacing="47"],
+  h-stack[spacing="47"]) {
     gap: 4.7rem;
   }
-  :where(v-stack[spacing="48"]) {
+  :where(v-stack[spacing="48"],
+  h-stack[spacing="48"]) {
     gap: 4.8rem;
   }
-  :where(v-stack[spacing="49"]) {
+  :where(v-stack[spacing="49"],
+  h-stack[spacing="49"]) {
     gap: 4.9rem;
   }
-  :where(v-stack[spacing="50"]) {
+  :where(v-stack[spacing="50"],
+  h-stack[spacing="50"]) {
     gap: 5rem;
   }
-  :where(v-stack[frame\:alignment=center]) {
+  :where(v-stack[frame\:alignment=center],
+  h-stack[frame\:alignment=center]) {
     justify-self: center;
   }
   :where(v-stack[padding],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.50",
+  "version": "0.0.0-dev.52",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/components/_table-column.scss

@@ -15,6 +15,8 @@
       place-content: start;
 
       place-items: center;
+
+      color: var(--blue);
     }
 
     &[aria-sort] {

package/scss/components/_table-row.scss

@@ -138,6 +138,42 @@
           }
         }
       }
+      table-view[preferred-compact-template='title:subtitle:trailing'] > & {
+        :where(&) {
+          grid-template-columns: 1fr 1fr;
+          grid-template-rows: repeat(2, auto);
+          grid-template-areas:
+            'title trailing'
+            'subtitle _';
+          // grid-template-rows: repeat(3, auto); /* 3 rows for first 6 items */
+          // grid-template-areas:
+          //   'a b'
+          //   'c d'
+          //   'e f';
+        }
+        > :nth-child(-n + 3) {
+          :where(&) {
+            display: grid;
+          }
+        }
+        > :nth-child(1) {
+          :where(&) {
+            grid-area: title;
+          }
+        }
+        > :nth-child(2) {
+          :where(&) {
+            grid-area: subtitle;
+          }
+        }
+        > :nth-child(3) {
+          :where(&) {
+            grid-area: trailing;
+            place-self: end;
+            grid-column: 1 / -1;
+          }
+        }
+      }
       table-view[preferred-compact-template='*'] > & {
         > :nth-child(n + 2) {
           :where(&) {

package/scss/components/_table-view.scss

@@ -107,6 +107,7 @@ $table-elses: (
 
       &::part(table-column-stack) {
         grid-auto-flow: column;
+
         grid-auto-columns: minmax(0, 1fr);
 
         column-gap: var(--table-col-gap);
@@ -115,7 +116,9 @@ $table-elses: (
 
         padding-block: var(--table-row-gap);
 
-        color: var(--blue);
+        // color: var(--blue);
+        font-size: 0.875rem;
+        font-weight: 600;
 
         background-color: var(--separator);
       }
@@ -165,14 +168,19 @@ $table-elses: (
       // SECTION: Columns counter
       :where(&) {
         --table--expanded-columns: 1;
-      }
 
-      :where(&:has(> [slot='column']:nth-of-type(2)):not(:has(> [slot='column']:nth-of-type(3)))) {
-        --table--expanded-columns: 2;
-      }
-      :where(&:has(> [slot='column']:nth-of-type(3)):not(:has(> [slot='column']:nth-of-type(4)))) {
-        --table--expanded-columns: 3;
+        @for $i from 2 through 6 {
+          &:has(> [slot='column']:nth-child(#{$i} of [slot='column'])) {
+            --table--expanded-columns: #{$i};
+          }
+        }
       }
+      // :where(&:has(> [slot='column']:nth-of-type(2)):not(:has(> [slot='column']:nth-of-type(3)))) {
+      //   --table--expanded-columns: 2;
+      // }
+      // :where(&:has(> [slot='column']:nth-of-type(3)):not(:has(> [slot='column']:nth-of-type(4)))) {
+      //   --table--expanded-columns: 3;
+      // }
 
       // // @include mixins.center-toolbar-elements('&');
       // :where(& > button[slot^='header'], & > button[slot^='footer']),

package/scss/utils/_stacks.scss

@@ -170,7 +170,8 @@ $v-placement-map: (
     // }
   }
 
-  v-stack {
+  v-stack,
+  h-stack {
     // $spaces: 0, 1, 2, 3, 4;
     // @each $s in $spaces {
     @for $i from 0 through 50 {

package/web-components.html-data/en.json

@@ -166,6 +166,17 @@
         }
       ]
     },
+    {
+      "name": "hstack",
+      "description": "",
+      "attributes": [
+        {
+          "name": "spacing",
+          "description": "\nDescription: The gap between the primary axis",
+          "valueSet": "spacingSet"
+        }
+      ]
+    },
     {
       "name": "image-view",
       "attributes": [
@@ -331,7 +342,27 @@
     },
     {
       "name": "table-view",
-      "description": "Display selectable, sortable data arranged in rows and columns."
+      "description": "Display selectable, sortable data arranged in rows and columns.",
+      "attributes": [
+        {
+          "name": "preferred-compact-template",
+          "description": "Value Type: “title:trailing:subtitle” | “trailing:title:subtitle” | “title:subtitle:trailing” | “*”\n\nDescription: Sets the template areas when the table is in compact mode",
+          "values": [
+            {
+              "name": "title:trailing:subtitle"
+            },
+            {
+              "name": "trailing:title:subtitle"
+            },
+            {
+              "name": "title:subtitle:trailing"
+            },
+            {
+              "name": "*"
+            }
+          ]
+        }
+      ]
     },
     {
       "name": "text-field",
@@ -443,7 +474,7 @@
           ]
         },
         {
-          "name": "templat",
+          "name": "template",
           "description": "Value Type: “auto spacer” | “auto auto spacer” | “auto auto auto spacer”",
           "values": [
             {
@@ -456,6 +487,11 @@
               "name": "auto auto auto spacer"
             }
           ]
+        },
+        {
+          "name": "spacing",
+          "description": "\nDescription: The gap between the primary axis",
+          "valueSet": "spacingSet"
         }
       ]
     }
@@ -488,6 +524,31 @@
     }
   ],
   "valueSets": [
+    {
+      "name": "spacingSet",
+      "values": [
+        {
+          "name": "0",
+          "description": "0rem"
+        },
+        {
+          "name": "1",
+          "description": "0.1rem"
+        },
+        {
+          "name": "2",
+          "description": "0.2rem"
+        },
+        {
+          "name": "3",
+          "description": "0.3rem"
+        },
+        {
+          "name": "4",
+          "description": "0.4rem"
+        }
+      ]
+    },
     {
       "name": "tintSet",
       "values": [