@uh-design-system/component-library 1.0.1 → 1.0.2-rc.0

package/dist/collection/components/01-base-components/ds-combobox/ds-combobox.css

@@ -13,7 +13,7 @@
   position: relative;
 }
 
-.ds-combobox__1vtSAV__input-container {
+.ds-combobox__rhSGFS__input-container {
   position: relative;
   display: flex;
   align-items: center;
@@ -25,37 +25,37 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-combobox__1vtSAV__input-container--disabled {
+.ds-combobox__rhSGFS__input-container--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-combobox__1vtSAV__input-container--disabled .ds-combobox__1vtSAV__input-container__toggle-button {
+.ds-combobox__rhSGFS__input-container--disabled .ds-combobox__rhSGFS__input-container__toggle-button {
   cursor: not-allowed;
 }
-.ds-combobox__1vtSAV__input-container--invalid {
+.ds-combobox__rhSGFS__input-container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-combobox__1vtSAV__input-container--invalid:not(.ds-combobox__1vtSAV__input-container--open):not(.ds-combobox__1vtSAV__input-container--disabled):hover {
+.ds-combobox__rhSGFS__input-container--invalid:not(.ds-combobox__rhSGFS__input-container--open):not(.ds-combobox__rhSGFS__input-container--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-combobox__1vtSAV__input-container--invalid:not(.ds-combobox__1vtSAV__input-container--open):not(.ds-combobox__1vtSAV__input-container--disabled):active {
+.ds-combobox__rhSGFS__input-container--invalid:not(.ds-combobox__rhSGFS__input-container--open):not(.ds-combobox__rhSGFS__input-container--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-combobox__1vtSAV__input-container:active:not(.ds-combobox__1vtSAV__input-container--invalid, .ds-combobox__1vtSAV__input-container--disabled) {
+.ds-combobox__rhSGFS__input-container:active:not(.ds-combobox__rhSGFS__input-container--invalid, .ds-combobox__rhSGFS__input-container--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-combobox__1vtSAV__input-container:not(.ds-combobox__1vtSAV__input-container--open, .ds-combobox__1vtSAV__input-container:has(> .ds-combobox__1vtSAV__input-container__clear-button > button:focus), .ds-combobox__1vtSAV__input-container--invalid, .ds-combobox__1vtSAV__input-container--disabled):hover {
+.ds-combobox__rhSGFS__input-container:not(.ds-combobox__rhSGFS__input-container--open, .ds-combobox__rhSGFS__input-container:has(> .ds-combobox__rhSGFS__input-container__clear-button > button:focus), .ds-combobox__rhSGFS__input-container--invalid, .ds-combobox__rhSGFS__input-container--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-combobox__1vtSAV__input-container:has(> .ds-combobox__1vtSAV__input-container__input:focus), .ds-combobox__1vtSAV__input-container:has(> .ds-combobox__1vtSAV__input-container__clear-button > button:focus) {
+.ds-combobox__rhSGFS__input-container:has(> .ds-combobox__rhSGFS__input-container__input:focus), .ds-combobox__rhSGFS__input-container:has(> .ds-combobox__rhSGFS__input-container__clear-button > button:focus) {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-combobox__1vtSAV__input-container__input {
+.ds-combobox__rhSGFS__input-container__input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -69,36 +69,36 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-combobox__1vtSAV__input-container__input::placeholder {
+.ds-combobox__rhSGFS__input-container__input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-combobox__1vtSAV__input-container__input:disabled {
+.ds-combobox__rhSGFS__input-container__input:disabled {
   cursor: not-allowed;
 }
-.ds-combobox__1vtSAV__input-container__input:disabled::placeholder {
+.ds-combobox__rhSGFS__input-container__input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__1vtSAV__input-container__input:focus {
+.ds-combobox__rhSGFS__input-container__input:focus {
   outline: none;
 }
-.ds-combobox__1vtSAV__input-container__icon {
+.ds-combobox__rhSGFS__input-container__icon {
   padding-left: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__1vtSAV__input-container__icon + .ds-combobox__1vtSAV__input-container__input {
+.ds-combobox__rhSGFS__input-container__icon + .ds-combobox__rhSGFS__input-container__input {
   padding-left: var(--ds-spacing-2xSmall);
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__1vtSAV__input-container__clear-button, .ds-combobox__1vtSAV__input-container__toggle-button {
+.ds-combobox__rhSGFS__input-container__clear-button, .ds-combobox__rhSGFS__input-container__toggle-button {
   cursor: pointer;
 }
-.ds-combobox__1vtSAV__input-container__toggle-button {
+.ds-combobox__rhSGFS__input-container__toggle-button {
   color: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
-.ds-combobox__1vtSAV__input-container__toggle-button__icon {
+.ds-combobox__rhSGFS__input-container__toggle-button__icon {
   align-items: center;
   align-self: stretch;
   border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);
@@ -107,7 +107,7 @@
   pointer-events: none;
   padding: 0 var(--ds-spacing-2xSmall);
 }
-.ds-combobox__1vtSAV__options-container {
+.ds-combobox__rhSGFS__options-container {
   display: none;
   position: absolute;
   top: 100%;
@@ -117,11 +117,11 @@
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   background-color: var(--ds-bgColor-white);
 }
-.ds-combobox__1vtSAV__options-container--open {
+.ds-combobox__rhSGFS__options-container--open {
   display: block;
   box-shadow: 0 var(--ds-spacing-4xSmall) var(--ds-spacing-3xSmall) calc(-1 * var(--ds-spacing-4xSmall)) var(--ds-overlay-black-15), 0 var(--ds-spacing-3xSmall) calc(var(--ds-spacing-xSmall) / 2) calc(-0.5 * var(--ds-spacing-4xSmall)) var(--ds-overlay-black-15);
 }
-.ds-combobox__1vtSAV__options-container__options {
+.ds-combobox__rhSGFS__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -130,7 +130,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-combobox__1vtSAV__options-container__options__inner {
+.ds-combobox__rhSGFS__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -141,7 +141,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-combobox__1vtSAV__options-container__options__inner__top-scrim, .ds-combobox__1vtSAV__options-container__options__inner__bottom-scrim {
+.ds-combobox__rhSGFS__options-container__options__inner__top-scrim, .ds-combobox__rhSGFS__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -151,20 +151,20 @@
   z-index: 1;
   display: none;
 }
-.ds-combobox__1vtSAV__options-container__options__inner__top-scrim--visible, .ds-combobox__1vtSAV__options-container__options__inner__bottom-scrim--visible {
+.ds-combobox__rhSGFS__options-container__options__inner__top-scrim--visible, .ds-combobox__rhSGFS__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-combobox__1vtSAV__options-container__options__inner__top-scrim {
+.ds-combobox__rhSGFS__options-container__options__inner__top-scrim {
   top: 0;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-combobox__1vtSAV__options-container__options__inner__top-scrim--dark {
+.ds-combobox__rhSGFS__options-container__options__inner__top-scrim--dark {
   height: calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));
   background: none;
   margin-top: calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));
   box-shadow: 0 -2px 7px var(--ds-overlay-black-50);
 }
-.ds-combobox__1vtSAV__options-container__options__inner__bottom-scrim {
+.ds-combobox__rhSGFS__options-container__options__inner__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }

package/dist/collection/components/01-base-components/ds-control-label/ds-control-label.css

@@ -1,4 +1,4 @@
-.ds-control-label__1vtSAV__label {
+.ds-control-label__rhSGFS__label {
   padding-inline: 0;
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-semibold);
@@ -7,7 +7,7 @@
   color: var(--ds-textColor-default);
 }
 
-.ds-control-label__1vtSAV__assistive-text {
+.ds-control-label__rhSGFS__assistive-text {
   display: inline-block;
   font-size: var(--ds-fontSize-14);
   color: var(--ds-textColor-secondary);
@@ -15,11 +15,11 @@
   margin-block-start: var(--ds-spacing-3xSmall);
 }
 
-.ds-control-label__1vtSAV {
+.ds-control-label__rhSGFS {
   display: flex;
   flex-direction: column;
   margin-block-end: var(--ds-spacing-2xSmall);
 }
-.ds-control-label__1vtSAV:empty {
+.ds-control-label__rhSGFS:empty {
   display: none;
 }

package/dist/collection/components/01-base-components/ds-grid/ds-grid.css

@@ -1,4 +1,18 @@
-.ds-grid__1vtSAV {
+.ds-grid__rhSGFS.ds-grid__rhSGFS--container {
+  max-width: calc(var(--ds-breakpoint-xLarge) - var(--ds-spacing-layout-large));
+  margin: 0 var(--ds-spacing-layout-2xSmall);
+}
+@media (min-width: 30rem) {
+  .ds-grid__rhSGFS.ds-grid__rhSGFS--container {
+    margin: 0 var(--ds-spacing-layout-small);
+  }
+}
+@media (min-width: 90rem) {
+  .ds-grid__rhSGFS.ds-grid__rhSGFS--container {
+    margin: 0 auto;
+  }
+}
+.ds-grid__rhSGFS.ds-grid__rhSGFS__flex {
   display: flex;
   flex-flow: wrap;
   min-width: 0;
@@ -6,39 +20,87 @@
   gap: var(--ds-spacing-layout-2xSmall);
 }
 @media (min-width: 30rem) {
-  .ds-grid__1vtSAV {
+  .ds-grid__rhSGFS.ds-grid__rhSGFS__flex {
     gap: var(--ds-spacing-layout-xSmall);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__1vtSAV {
+  .ds-grid__rhSGFS.ds-grid__rhSGFS__flex {
     gap: var(--ds-spacing-layout-small);
   }
 }
-.ds-grid__1vtSAV--container {
-  max-width: calc(var(--ds-breakpoint-xLarge) - var(--ds-spacing-layout-large));
-  margin: 0 var(--ds-spacing-layout-2xSmall);
+.ds-grid__rhSGFS.ds-grid__rhSGFS__flex:not(.ds-grid__rhSGFS.ds-grid__rhSGFS__flex--container) {
+  width: calc(100% * var(--ds-size-mobile) / var(--ds-parent-size-mobile) - (var(--ds-parent-size-mobile) - var(--ds-size-mobile)) * var(--ds-spacing-layout-2xSmall) / var(--ds-parent-size-mobile));
 }
 @media (min-width: 30rem) {
-  .ds-grid__1vtSAV--container {
-    margin: 0 var(--ds-spacing-layout-small);
+  .ds-grid__rhSGFS.ds-grid__rhSGFS__flex:not(.ds-grid__rhSGFS.ds-grid__rhSGFS__flex--container) {
+    width: calc(100% * var(--ds-size-tablet) / var(--ds-parent-size-tablet) - (var(--ds-parent-size-tablet) - var(--ds-size-tablet)) * var(--ds-spacing-layout-xSmall) / var(--ds-parent-size-tablet));
   }
 }
-@media (min-width: 90rem) {
-  .ds-grid__1vtSAV--container {
-    margin: 0 auto;
+@media (min-width: 75rem) {
+  .ds-grid__rhSGFS.ds-grid__rhSGFS__flex:not(.ds-grid__rhSGFS.ds-grid__rhSGFS__flex--container) {
+    width: calc(100% * var(--ds-size-desktop) / var(--ds-parent-size-desktop) - (var(--ds-parent-size-desktop) - var(--ds-size-desktop)) * var(--ds-spacing-layout-small) / var(--ds-parent-size-desktop));
   }
 }
-.ds-grid__1vtSAV:not(.ds-grid__1vtSAV--container) {
-  width: calc(100% * var(--ds-size-mobile) / var(--ds-parent-size-mobile) - (var(--ds-parent-size-mobile) - var(--ds-size-mobile)) * var(--ds-spacing-layout-2xSmall) / var(--ds-parent-size-mobile));
+.ds-grid__rhSGFS.ds-grid__rhSGFS__grid.ds-grid__rhSGFS--container {
+  display: grid;
+  grid-template-columns: repeat(var(--ds-columns-mobile), 1fr);
+  gap: var(--ds-spacing-layout-2xSmall);
 }
 @media (min-width: 30rem) {
-  .ds-grid__1vtSAV:not(.ds-grid__1vtSAV--container) {
-    width: calc(100% * var(--ds-size-tablet) / var(--ds-parent-size-tablet) - (var(--ds-parent-size-tablet) - var(--ds-size-tablet)) * var(--ds-spacing-layout-xSmall) / var(--ds-parent-size-tablet));
+  .ds-grid__rhSGFS.ds-grid__rhSGFS__grid.ds-grid__rhSGFS--container {
+    gap: var(--ds-spacing-layout-xSmall);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__1vtSAV:not(.ds-grid__1vtSAV--container) {
-    width: calc(100% * var(--ds-size-desktop) / var(--ds-parent-size-desktop) - (var(--ds-parent-size-desktop) - var(--ds-size-desktop)) * var(--ds-spacing-layout-small) / var(--ds-parent-size-desktop));
+  .ds-grid__rhSGFS.ds-grid__rhSGFS__grid.ds-grid__rhSGFS--container {
+    gap: var(--ds-spacing-layout-small);
+  }
+}
+@media (min-width: 30rem) {
+  .ds-grid__rhSGFS.ds-grid__rhSGFS__grid.ds-grid__rhSGFS--container {
+    grid-template-columns: repeat(var(--ds-columns-tablet), 1fr);
+  }
+}
+@media (min-width: 75rem) {
+  .ds-grid__rhSGFS.ds-grid__rhSGFS__grid.ds-grid__rhSGFS--container {
+    grid-template-columns: repeat(var(--ds-columns-desktop), 1fr);
+  }
+}
+.ds-grid__rhSGFS.ds-grid__rhSGFS__grid {
+  grid-column: span var(--ds-size-mobile);
+  grid-row: span var(--ds-row-span-mobile, 1);
+}
+@supports (grid-column: span var(--ds-size-mobile)) {
+  .ds-grid__rhSGFS.ds-grid__rhSGFS__grid[style*="--ds-size-mobile: -1"] {
+    grid-column: 1/-1;
+  }
+}
+@media (min-width: 30rem) {
+  .ds-grid__rhSGFS.ds-grid__rhSGFS__grid {
+    grid-column: span var(--ds-size-tablet);
+    grid-row: span var(--ds-row-span-tablet, 1);
+  }
+  @supports (grid-column: span var(--ds-size-tablet)) {
+    .ds-grid__rhSGFS.ds-grid__rhSGFS__grid[style*="--ds-size-tablet: -1"] {
+      grid-column: 1/-1;
+    }
+    .ds-grid__rhSGFS.ds-grid__rhSGFS__grid:not([style*="--ds-size-tablet: -1"]) {
+      grid-column: span var(--ds-size-tablet);
+    }
+  }
+}
+@media (min-width: 75rem) {
+  .ds-grid__rhSGFS.ds-grid__rhSGFS__grid {
+    grid-column: span var(--ds-size-desktop);
+    grid-row: span var(--ds-row-span-desktop, 1);
+  }
+  @supports (grid-column: span var(--ds-size-desktop)) {
+    .ds-grid__rhSGFS.ds-grid__rhSGFS__grid[style*="--ds-size-desktop: -1"] {
+      grid-column: 1/-1;
+    }
+    .ds-grid__rhSGFS.ds-grid__rhSGFS__grid:not([style*="--ds-size-desktop: -1"]) {
+      grid-column: span var(--ds-size-desktop);
+    }
   }
 }

package/dist/collection/components/01-base-components/ds-grid/ds-grid.js

@@ -5,6 +5,7 @@ import { declareComponentDependencies, transformTagName } from "../../../utils/u
 export class DsGrid {
     el;
     dsContainer = false;
+    dsType = 'flex';
     dsSize = 12;
     dsSizeMobile;
     dsSizeTablet;
@@ -12,6 +13,12 @@ export class DsGrid {
     dsParentSizeMobile;
     dsParentSizeTablet;
     dsParentSizeDesktop;
+    dsColumnsMobile;
+    dsColumnsTablet;
+    dsColumnsDesktop;
+    dsRowSpanMobile;
+    dsRowSpanTablet;
+    dsRowSpanDesktop;
     get DsGridTag() {
         return transformTagName('ds-grid', 'ds-grid', this.el);
     }
@@ -22,6 +29,9 @@ export class DsGrid {
         this.getChildGridElements().forEach(updateFn);
     };
     componentDidLoad() {
+        if (this.dsType !== 'flex') {
+            return;
+        }
         this.updateChildGrids(element => {
             element.setAttribute('ds-parent-size-mobile', (this.dsSizeMobile ? this.dsSizeMobile * 3 : this.dsSize).toString());
             element.setAttribute('ds-parent-size-tablet', (this.dsSizeTablet ? this.dsSizeTablet * 2 : this.dsSize).toString());
@@ -32,15 +42,34 @@ export class DsGrid {
         const baseClass = cx('ds-grid');
         const classes = classNames(baseClass, {
             [`${baseClass}--container`]: this.dsContainer,
+            [`${baseClass}__${this.dsType}`]: this.dsType,
         });
-        return (h(Host, { key: '0bd8521c2ec635dff2c3321aedc8682dede95430', class: classes, style: {
-                '--ds-parent-size-mobile': `${this.dsParentSizeMobile}`,
-                '--ds-parent-size-tablet': `${this.dsParentSizeTablet}`,
-                '--ds-parent-size-desktop': `${this.dsParentSizeDesktop}`,
-                '--ds-size-mobile': `${this.dsSizeMobile ? this.dsSizeMobile * 3 : this.dsSize}`,
-                '--ds-size-tablet': `${this.dsSizeTablet ? this.dsSizeTablet * 2 : this.dsSize}`,
-                '--ds-size-desktop': `${this.dsSizeDesktop || this.dsSize}`,
-            } }, h("slot", { key: '9f70a32f5c3c8a0e9ce7ff3f756a49fcfed4ed9f' })));
+        return (h(Host, { key: '302f8d3e5ca7922582c559c8171803ff2234574c', class: classes, style: {
+                ...(this.dsType === 'flex') ? {
+                    '--ds-parent-size-mobile': `${this.dsParentSizeMobile}`,
+                    '--ds-parent-size-tablet': `${this.dsParentSizeTablet}`,
+                    '--ds-parent-size-desktop': `${this.dsParentSizeDesktop}`,
+                    '--ds-size-mobile': `${this.dsSizeMobile ? this.dsSizeMobile * 3 : this.dsSize}`,
+                    '--ds-size-tablet': `${this.dsSizeTablet ? this.dsSizeTablet * 2 : this.dsSize}`,
+                    '--ds-size-desktop': `${this.dsSizeDesktop || this.dsSize}`,
+                } : {
+                    ...(this.dsContainer) ? {
+                        '--ds-columns-mobile': this.dsColumnsMobile ? `${this.dsColumnsMobile}` : undefined,
+                        '--ds-columns-tablet': this.dsColumnsTablet ? `${this.dsColumnsTablet}` : undefined,
+                        '--ds-columns-desktop': this.dsColumnsDesktop ? `${this.dsColumnsDesktop}` : undefined,
+                    } : {
+                        '--ds-columns-mobile': "unset",
+                        '--ds-columns-tablet': "unset",
+                        '--ds-columns-desktop': "unset",
+                    },
+                    '--ds-size-mobile': `${this.dsSizeMobile || this.dsSize}`,
+                    '--ds-size-tablet': `${this.dsSizeTablet || this.dsSize}`,
+                    '--ds-size-desktop': `${this.dsSizeDesktop || this.dsSize}`,
+                    '--ds-row-span-mobile': this.dsRowSpanMobile ? `${this.dsRowSpanMobile}` : undefined,
+                    '--ds-row-span-tablet': this.dsRowSpanTablet ? `${this.dsRowSpanTablet}` : undefined,
+                    '--ds-row-span-desktop': this.dsRowSpanDesktop ? `${this.dsRowSpanDesktop}` : undefined,
+                }
+            } }, h("slot", { key: '346a2aac8eb37ea162d1c6c40a4f875b766fd3c9' })));
     }
     static get is() { return "ds-grid"; }
     static get originalStyleUrls() {
@@ -75,6 +104,26 @@ export class DsGrid {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "dsType": {
+                "type": "string",
+                "attribute": "ds-type",
+                "mutable": false,
+                "complexType": {
+                    "original": "'grid' | 'flex'",
+                    "resolved": "\"flex\" | \"grid\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Grid type. Defaults to 'flex'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'flex'"
+            },
             "dsSize": {
                 "type": "number",
                 "attribute": "ds-size",
@@ -118,7 +167,7 @@ export class DsGrid {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Mobile grid size."
+                    "text": "Mobile grid size when dsType is 'flex'. Indicates number of columns it covers when dsType is 'grid'. If -1, it will span all columns."
                 },
                 "getter": false,
                 "setter": false,
@@ -142,7 +191,7 @@ export class DsGrid {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Tablet grid size."
+                    "text": "Tablet grid size when dsType is 'flex'. Indicates number of columns it covers when dsType is 'grid'. If -1, it will span all columns."
                 },
                 "getter": false,
                 "setter": false,
@@ -166,7 +215,7 @@ export class DsGrid {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Desktop grid size."
+                    "text": "Desktop grid size when dsType is 'flex'. Indicates number of columns it covers when dsType is 'grid'. If -1, it will span all columns."
                 },
                 "getter": false,
                 "setter": false,
@@ -190,7 +239,7 @@ export class DsGrid {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "For internal use. Parent mobile size."
+                    "text": "For internal use. Parent mobile size. Used when dsType is 'flex'."
                 },
                 "getter": false,
                 "setter": false,
@@ -214,7 +263,7 @@ export class DsGrid {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "For internal use. Parent tablet size."
+                    "text": "For internal use. Parent tablet size. Used when dsType is 'flex'."
                 },
                 "getter": false,
                 "setter": false,
@@ -238,7 +287,121 @@ export class DsGrid {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "For internal use. Parent desktop size."
+                    "text": "For internal use. Parent desktop size. Used when dsType is 'flex'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsColumnsMobile": {
+                "type": "number",
+                "attribute": "ds-columns-mobile",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of columns for mobile. Used when dsType is 'grid' and for containers only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsColumnsTablet": {
+                "type": "number",
+                "attribute": "ds-columns-tablet",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of columns for tablet. Used when dsType is 'grid' and for containers only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsColumnsDesktop": {
+                "type": "number",
+                "attribute": "ds-columns-desktop",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of columns for desktop. Used when dsType is 'grid' and for containers only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsRowSpanMobile": {
+                "type": "number",
+                "attribute": "ds-row-span-mobile",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Mobile row span. Used when dsType is 'grid'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsRowSpanTablet": {
+                "type": "number",
+                "attribute": "ds-row-span-tablet",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tablet row span. Used when dsType is 'grid'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsRowSpanDesktop": {
+                "type": "number",
+                "attribute": "ds-row-span-desktop",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Desktop row span. Used when dsType is 'grid'."
                 },
                 "getter": false,
                 "setter": false,