@hashicorp/design-system-components 4.21.0 → 4.22.0-rc-20250711180943

package/declarations/components/hds/layout/flex/index.d.ts

@@ -5,12 +5,13 @@
 import Component from '@glimmer/component';
 import type { ComponentLike } from '@glint/template';
 import type { HdsLayoutFlexItemSignature } from './item.ts';
-import { HdsLayoutFlexDirectionValues } from './types.ts';
+import { HdsLayoutFlexDirectionValues, HdsLayoutFlexGapValues } from './types.ts';
 import type { HdsLayoutFlexDirections, HdsLayoutFlexJustifys, HdsLayoutFlexAligns, HdsLayoutFlexGaps, AvailableTagNames, AvailableElements } from './types.ts';
 export declare const DEFAULT_DIRECTION = HdsLayoutFlexDirectionValues.Row;
 export declare const DIRECTIONS: string[];
 export declare const JUSTIFYS: string[];
 export declare const ALIGNS: string[];
+export declare const DEFAULT_GAP = HdsLayoutFlexGapValues['Zero'];
 export declare const GAPS: string[];
 export interface HdsLayoutFlexSignature {
     Args: {

package/declarations/components/hds/layout/flex/types.d.ts

@@ -24,6 +24,7 @@ export declare enum HdsLayoutFlexAlignValues {
 }
 export type HdsLayoutFlexAligns = `${HdsLayoutFlexAlignValues}`;
 export declare enum HdsLayoutFlexGapValues {
+    'Zero' = "0",
     'Four' = "4",
     'Eight' = "8",
     'Twelve' = "12",

package/declarations/components/hds/layout/grid/index.d.ts

@@ -5,8 +5,10 @@
 import Component from '@glimmer/component';
 import type { ComponentLike } from '@glint/template';
 import type { HdsLayoutGridItemSignature } from '../grid/item.ts';
+import { HdsLayoutGridGapValues } from './types.ts';
 import type { HdsLayoutGridAligns, HdsLayoutGridGaps, AvailableTagNames, AvailableElements } from './types.ts';
 export declare const ALIGNS: string[];
+export declare const DEFAULT_GAP = HdsLayoutGridGapValues['Zero'];
 export declare const GAPS: string[];
 export interface HdsLayoutGridSignature {
     Args: {

package/declarations/components/hds/layout/grid/types.d.ts

@@ -10,6 +10,7 @@ export declare enum HdsLayoutGridAlignValues {
 }
 export type HdsLayoutGridAligns = `${HdsLayoutGridAlignValues}`;
 export declare enum HdsLayoutGridGapValues {
+    'Zero' = "0",
     'Four' = "4",
     'Eight' = "8",
     'Twelve' = "12",

package/dist/components/hds/form/key-value-inputs/generic.js

@@ -3,7 +3,7 @@ import { modifier } from 'ember-modifier';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
-var TEMPLATE = precompileTemplate("<div class=\"hds-form-key-value-inputs__generic-container\" {{this._onInsert}} ...attributes>\n  {{yield}}\n</div>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n<div class=\"hds-form-key-value-inputs__generic-container\" {{this._onInsert}} ...attributes>\n  {{yield}}\n</div>");
 
 /**
  * Copyright (c) HashiCorp, Inc.

package/dist/components/hds/layout/flex/index.js

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
-import { HdsLayoutFlexDirectionValues, HdsLayoutFlexJustifyValues, HdsLayoutFlexAlignValues, HdsLayoutFlexGapValues } from './types.js';
+import { HdsLayoutFlexDirectionValues, HdsLayoutFlexGapValues, HdsLayoutFlexJustifyValues, HdsLayoutFlexAlignValues } from './types.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -15,6 +15,7 @@ const DEFAULT_DIRECTION = HdsLayoutFlexDirectionValues.Row;
 const DIRECTIONS = Object.values(HdsLayoutFlexDirectionValues);
 const JUSTIFYS = Object.values(HdsLayoutFlexJustifyValues);
 const ALIGNS = Object.values(HdsLayoutFlexAlignValues);
+const DEFAULT_GAP = HdsLayoutFlexGapValues.Zero;
 const GAPS = Object.values(HdsLayoutFlexGapValues);
 class HdsLayoutFlex extends Component {
   get componentTag() {
@@ -47,7 +48,7 @@ class HdsLayoutFlex extends Component {
   }
   get gap() {
     const {
-      gap
+      gap = DEFAULT_GAP
     } = this.args;
     if (gap) {
       assert(`@gap for "Hds::Layout::Flex" must be a single value or an array of two values of one of the following: ${GAPS.join(', '
@@ -99,5 +100,5 @@ class HdsLayoutFlex extends Component {
 }
 setComponentTemplate(TEMPLATE, HdsLayoutFlex);
 
-export { ALIGNS, DEFAULT_DIRECTION, DIRECTIONS, GAPS, JUSTIFYS, HdsLayoutFlex as default };
+export { ALIGNS, DEFAULT_DIRECTION, DEFAULT_GAP, DIRECTIONS, GAPS, JUSTIFYS, HdsLayoutFlex as default };
 //# sourceMappingURL=index.js.map

package/dist/components/hds/layout/flex/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/layout/flex/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { assert } from '@ember/debug';\n\nimport type { ComponentLike } from '@glint/template';\n\nimport type { HdsLayoutFlexItemSignature } from './item.ts';\n\nimport {\n  HdsLayoutFlexDirectionValues,\n  HdsLayoutFlexJustifyValues,\n  HdsLayoutFlexAlignValues,\n  HdsLayoutFlexGapValues,\n} from './types.ts';\n\nimport type {\n  HdsLayoutFlexDirections,\n  HdsLayoutFlexJustifys,\n  HdsLayoutFlexAligns,\n  HdsLayoutFlexGaps,\n  AvailableTagNames,\n  AvailableElements,\n} from './types.ts';\n\nexport const DEFAULT_DIRECTION = HdsLayoutFlexDirectionValues.Row;\nexport const DIRECTIONS: string[] = Object.values(HdsLayoutFlexDirectionValues);\nexport const JUSTIFYS: string[] = Object.values(HdsLayoutFlexJustifyValues);\nexport const ALIGNS: string[] = Object.values(HdsLayoutFlexAlignValues);\nexport const GAPS: string[] = Object.values(HdsLayoutFlexGapValues);\n\nexport interface HdsLayoutFlexSignature {\n  Args: {\n    tag?: AvailableTagNames;\n    direction?: HdsLayoutFlexDirections;\n    justify?: HdsLayoutFlexJustifys;\n    align?: HdsLayoutFlexAligns;\n    wrap?: boolean;\n    gap?: HdsLayoutFlexGaps | [HdsLayoutFlexGaps, HdsLayoutFlexGaps];\n    isInline?: boolean;\n  };\n  Blocks: {\n    default: [\n      {\n        Item?: ComponentLike<HdsLayoutFlexItemSignature>;\n      },\n    ];\n  };\n  Element: AvailableElements;\n}\n\nexport default class HdsLayoutFlex extends Component<HdsLayoutFlexSignature> {\n  get componentTag(): AvailableTagNames {\n    return this.args.tag ?? 'div';\n  }\n\n  get direction(): HdsLayoutFlexDirections {\n    const { direction = DEFAULT_DIRECTION } = this.args;\n\n    assert(\n      `@direction for \"Hds::Layout::Flex\" must be one of the following: ${DIRECTIONS.join(\n        ', '\n      )}; received: ${direction}`,\n      DIRECTIONS.includes(direction)\n    );\n\n    return direction;\n  }\n\n  get justify(): HdsLayoutFlexJustifys | undefined {\n    const { justify } = this.args;\n\n    if (justify) {\n      assert(\n        `@justify for \"Hds::Layout::Flex\" must be one of the following: ${JUSTIFYS.join(\n          ', '\n        )}; received: ${justify}`,\n        JUSTIFYS.includes(justify)\n      );\n    }\n\n    return justify;\n  }\n\n  get align(): HdsLayoutFlexAligns | undefined {\n    const { align } = this.args;\n\n    if (align) {\n      assert(\n        `@align for \"Hds::Layout::Flex\" must be one of the following: ${ALIGNS.join(\n          ', '\n        )}; received: ${align}`,\n        ALIGNS.includes(align)\n      );\n    }\n\n    return align;\n  }\n\n  get gap():\n    | [HdsLayoutFlexGaps]\n    | [HdsLayoutFlexGaps, HdsLayoutFlexGaps]\n    | undefined {\n    const { gap } = this.args;\n\n    if (gap) {\n      assert(\n        `@gap for \"Hds::Layout::Flex\" must be a single value or an array of two values of one of the following: ${GAPS.join(\n          ', '\n          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n        )}; received: ${gap}`,\n        (!Array.isArray(gap) && GAPS.includes(gap)) ||\n          (Array.isArray(gap) &&\n            gap.length === 2 &&\n            GAPS.includes(gap[0]) &&\n            GAPS.includes(gap[1]))\n      );\n      return Array.isArray(gap) ? gap : [gap];\n    } else {\n      return undefined;\n    }\n  }\n\n  get classNames() {\n    const classes = ['hds-layout-flex'];\n\n    // add a class based on the @direction argument\n    classes.push(`hds-layout-flex--direction-${this.direction}`);\n\n    // add a class based on the @justify argument\n    if (this.justify) {\n      classes.push(`hds-layout-flex--justify-content-${this.justify}`);\n    }\n\n    // add a class based on the @align argument\n    if (this.align) {\n      classes.push(`hds-layout-flex--align-items-${this.align}`);\n    }\n\n    // add a class based on the @gap argument\n    if (this.gap) {\n      if (this.gap.length === 2) {\n        classes.push(`hds-layout-flex--row-gap-${this.gap[0]}`);\n        classes.push(`hds-layout-flex--column-gap-${this.gap[1]}`);\n      } else if (this.gap.length === 1) {\n        classes.push(`hds-layout-flex--row-gap-${this.gap[0]}`);\n        classes.push(`hds-layout-flex--column-gap-${this.gap[0]}`);\n      }\n    }\n\n    // add a class based on the @wrap argument\n    if (this.args.wrap) {\n      classes.push('hds-layout-flex--has-wrapping');\n    }\n\n    // add a class based on the @isInline argument\n    if (this.args.isInline) {\n      classes.push('hds-layout-flex--is-inline');\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["DEFAULT_DIRECTION","HdsLayoutFlexDirectionValues","Row","DIRECTIONS","Object","values","JUSTIFYS","HdsLayoutFlexJustifyValues","ALIGNS","HdsLayoutFlexAlignValues","GAPS","HdsLayoutFlexGapValues","HdsLayoutFlex","Component","componentTag","args","tag","direction","assert","join","includes","justify","align","gap","Array","isArray","length","undefined","classNames","classes","push","wrap","isInline","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;;AAyBaA,MAAAA,iBAAiB,GAAGC,4BAA4B,CAACC;AACvD,MAAMC,UAAoB,GAAGC,MAAM,CAACC,MAAM,CAACJ,4BAA4B;AACvE,MAAMK,QAAkB,GAAGF,MAAM,CAACC,MAAM,CAACE,0BAA0B;AACnE,MAAMC,MAAgB,GAAGJ,MAAM,CAACC,MAAM,CAACI,wBAAwB;AAC/D,MAAMC,IAAc,GAAGN,MAAM,CAACC,MAAM,CAACM,sBAAsB;AAsBnD,MAAMC,aAAa,SAASC,SAAS,CAAyB;EAC3E,IAAIC,YAAYA,GAAsB;AACpC,IAAA,OAAO,IAAI,CAACC,IAAI,CAACC,GAAG,IAAI,KAAK;AAC/B;EAEA,IAAIC,SAASA,GAA4B;IACvC,MAAM;AAAEA,MAAAA,SAAS,GAAGjB;KAAmB,GAAG,IAAI,CAACe,IAAI;AAEnDG,IAAAA,MAAM,CACJ,CAAoEf,iEAAAA,EAAAA,UAAU,CAACgB,IAAI,CACjF,IACF,CAAC,CAAA,YAAA,EAAeF,SAAS,CAAA,CAAE,EAC3Bd,UAAU,CAACiB,QAAQ,CAACH,SAAS,CAC/B,CAAC;AAED,IAAA,OAAOA,SAAS;AAClB;EAEA,IAAII,OAAOA,GAAsC;IAC/C,MAAM;AAAEA,MAAAA;KAAS,GAAG,IAAI,CAACN,IAAI;AAE7B,IAAA,IAAIM,OAAO,EAAE;AACXH,MAAAA,MAAM,CACJ,CAAkEZ,+DAAAA,EAAAA,QAAQ,CAACa,IAAI,CAC7E,IACF,CAAC,CAAA,YAAA,EAAeE,OAAO,CAAA,CAAE,EACzBf,QAAQ,CAACc,QAAQ,CAACC,OAAO,CAC3B,CAAC;AACH;AAEA,IAAA,OAAOA,OAAO;AAChB;EAEA,IAAIC,KAAKA,GAAoC;IAC3C,MAAM;AAAEA,MAAAA;KAAO,GAAG,IAAI,CAACP,IAAI;AAE3B,IAAA,IAAIO,KAAK,EAAE;AACTJ,MAAAA,MAAM,CACJ,CAAgEV,6DAAAA,EAAAA,MAAM,CAACW,IAAI,CACzE,IACF,CAAC,CAAA,YAAA,EAAeG,KAAK,CAAA,CAAE,EACvBd,MAAM,CAACY,QAAQ,CAACE,KAAK,CACvB,CAAC;AACH;AAEA,IAAA,OAAOA,KAAK;AACd;EAEA,IAAIC,GAAGA,GAGO;IACZ,MAAM;AAAEA,MAAAA;KAAK,GAAG,IAAI,CAACR,IAAI;AAEzB,IAAA,IAAIQ,GAAG,EAAE;AACPL,MAAAA,MAAM,CACJ,CAAA,uGAAA,EAA0GR,IAAI,CAACS,IAAI,CACjH;AACA;OACD,CAAA,YAAA,EAAeI,GAAG,CAAE,CAAA,EACpB,CAACC,KAAK,CAACC,OAAO,CAACF,GAAG,CAAC,IAAIb,IAAI,CAACU,QAAQ,CAACG,GAAG,CAAC,IACvCC,KAAK,CAACC,OAAO,CAACF,GAAG,CAAC,IACjBA,GAAG,CAACG,MAAM,KAAK,CAAC,IAChBhB,IAAI,CAACU,QAAQ,CAACG,GAAG,CAAC,CAAC,CAAC,CAAC,IACrBb,IAAI,CAACU,QAAQ,CAACG,GAAG,CAAC,CAAC,CAAC,CAC1B,CAAC;MACD,OAAOC,KAAK,CAACC,OAAO,CAACF,GAAG,CAAC,GAAGA,GAAG,GAAG,CAACA,GAAG,CAAC;AACzC,KAAC,MAAM;AACL,MAAA,OAAOI,SAAS;AAClB;AACF;EAEA,IAAIC,UAAUA,GAAG;AACf,IAAA,MAAMC,OAAO,GAAG,CAAC,iBAAiB,CAAC;;AAEnC;IACAA,OAAO,CAACC,IAAI,CAAC,CAAA,2BAAA,EAA8B,IAAI,CAACb,SAAS,EAAE,CAAC;;AAE5D;IACA,IAAI,IAAI,CAACI,OAAO,EAAE;MAChBQ,OAAO,CAACC,IAAI,CAAC,CAAA,iCAAA,EAAoC,IAAI,CAACT,OAAO,EAAE,CAAC;AAClE;;AAEA;IACA,IAAI,IAAI,CAACC,KAAK,EAAE;MACdO,OAAO,CAACC,IAAI,CAAC,CAAA,6BAAA,EAAgC,IAAI,CAACR,KAAK,EAAE,CAAC;AAC5D;;AAEA;IACA,IAAI,IAAI,CAACC,GAAG,EAAE;AACZ,MAAA,IAAI,IAAI,CAACA,GAAG,CAACG,MAAM,KAAK,CAAC,EAAE;QACzBG,OAAO,CAACC,IAAI,CAAC,CAA4B,yBAAA,EAAA,IAAI,CAACP,GAAG,CAAC,CAAC,CAAC,CAAA,CAAE,CAAC;QACvDM,OAAO,CAACC,IAAI,CAAC,CAA+B,4BAAA,EAAA,IAAI,CAACP,GAAG,CAAC,CAAC,CAAC,CAAA,CAAE,CAAC;OAC3D,MAAM,IAAI,IAAI,CAACA,GAAG,CAACG,MAAM,KAAK,CAAC,EAAE;QAChCG,OAAO,CAACC,IAAI,CAAC,CAA4B,yBAAA,EAAA,IAAI,CAACP,GAAG,CAAC,CAAC,CAAC,CAAA,CAAE,CAAC;QACvDM,OAAO,CAACC,IAAI,CAAC,CAA+B,4BAAA,EAAA,IAAI,CAACP,GAAG,CAAC,CAAC,CAAC,CAAA,CAAE,CAAC;AAC5D;AACF;;AAEA;AACA,IAAA,IAAI,IAAI,CAACR,IAAI,CAACgB,IAAI,EAAE;AAClBF,MAAAA,OAAO,CAACC,IAAI,CAAC,+BAA+B,CAAC;AAC/C;;AAEA;AACA,IAAA,IAAI,IAAI,CAACf,IAAI,CAACiB,QAAQ,EAAE;AACtBH,MAAAA,OAAO,CAACC,IAAI,CAAC,4BAA4B,CAAC;AAC5C;AAEA,IAAA,OAAOD,OAAO,CAACV,IAAI,CAAC,GAAG,CAAC;AAC1B;AACF;AAACc,oBAAA,CAAAC,QAAA,EA/GoBtB,aAAa,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/layout/flex/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { assert } from '@ember/debug';\n\nimport type { ComponentLike } from '@glint/template';\n\nimport type { HdsLayoutFlexItemSignature } from './item.ts';\n\nimport {\n  HdsLayoutFlexDirectionValues,\n  HdsLayoutFlexJustifyValues,\n  HdsLayoutFlexAlignValues,\n  HdsLayoutFlexGapValues,\n} from './types.ts';\n\nimport type {\n  HdsLayoutFlexDirections,\n  HdsLayoutFlexJustifys,\n  HdsLayoutFlexAligns,\n  HdsLayoutFlexGaps,\n  AvailableTagNames,\n  AvailableElements,\n} from './types.ts';\n\nexport const DEFAULT_DIRECTION = HdsLayoutFlexDirectionValues.Row;\nexport const DIRECTIONS: string[] = Object.values(HdsLayoutFlexDirectionValues);\nexport const JUSTIFYS: string[] = Object.values(HdsLayoutFlexJustifyValues);\nexport const ALIGNS: string[] = Object.values(HdsLayoutFlexAlignValues);\nexport const DEFAULT_GAP = HdsLayoutFlexGapValues.Zero;\nexport const GAPS: string[] = Object.values(HdsLayoutFlexGapValues);\n\nexport interface HdsLayoutFlexSignature {\n  Args: {\n    tag?: AvailableTagNames;\n    direction?: HdsLayoutFlexDirections;\n    justify?: HdsLayoutFlexJustifys;\n    align?: HdsLayoutFlexAligns;\n    wrap?: boolean;\n    gap?: HdsLayoutFlexGaps | [HdsLayoutFlexGaps, HdsLayoutFlexGaps];\n    isInline?: boolean;\n  };\n  Blocks: {\n    default: [\n      {\n        Item?: ComponentLike<HdsLayoutFlexItemSignature>;\n      },\n    ];\n  };\n  Element: AvailableElements;\n}\n\nexport default class HdsLayoutFlex extends Component<HdsLayoutFlexSignature> {\n  get componentTag(): AvailableTagNames {\n    return this.args.tag ?? 'div';\n  }\n\n  get direction(): HdsLayoutFlexDirections {\n    const { direction = DEFAULT_DIRECTION } = this.args;\n\n    assert(\n      `@direction for \"Hds::Layout::Flex\" must be one of the following: ${DIRECTIONS.join(\n        ', '\n      )}; received: ${direction}`,\n      DIRECTIONS.includes(direction)\n    );\n\n    return direction;\n  }\n\n  get justify(): HdsLayoutFlexJustifys | undefined {\n    const { justify } = this.args;\n\n    if (justify) {\n      assert(\n        `@justify for \"Hds::Layout::Flex\" must be one of the following: ${JUSTIFYS.join(\n          ', '\n        )}; received: ${justify}`,\n        JUSTIFYS.includes(justify)\n      );\n    }\n\n    return justify;\n  }\n\n  get align(): HdsLayoutFlexAligns | undefined {\n    const { align } = this.args;\n\n    if (align) {\n      assert(\n        `@align for \"Hds::Layout::Flex\" must be one of the following: ${ALIGNS.join(\n          ', '\n        )}; received: ${align}`,\n        ALIGNS.includes(align)\n      );\n    }\n\n    return align;\n  }\n\n  get gap():\n    | [HdsLayoutFlexGaps]\n    | [HdsLayoutFlexGaps, HdsLayoutFlexGaps]\n    | undefined {\n    const { gap = DEFAULT_GAP } = this.args;\n\n    if (gap) {\n      assert(\n        `@gap for \"Hds::Layout::Flex\" must be a single value or an array of two values of one of the following: ${GAPS.join(\n          ', '\n          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n        )}; received: ${gap}`,\n        (!Array.isArray(gap) && GAPS.includes(gap)) ||\n          (Array.isArray(gap) &&\n            gap.length === 2 &&\n            GAPS.includes(gap[0]) &&\n            GAPS.includes(gap[1]))\n      );\n      return Array.isArray(gap) ? gap : [gap];\n    } else {\n      return undefined;\n    }\n  }\n\n  get classNames(): string {\n    const classes = ['hds-layout-flex'];\n\n    // add a class based on the @direction argument\n    classes.push(`hds-layout-flex--direction-${this.direction}`);\n\n    // add a class based on the @justify argument\n    if (this.justify) {\n      classes.push(`hds-layout-flex--justify-content-${this.justify}`);\n    }\n\n    // add a class based on the @align argument\n    if (this.align) {\n      classes.push(`hds-layout-flex--align-items-${this.align}`);\n    }\n\n    // add a class based on the @gap argument\n    if (this.gap) {\n      if (this.gap.length === 2) {\n        classes.push(`hds-layout-flex--row-gap-${this.gap[0]}`);\n        classes.push(`hds-layout-flex--column-gap-${this.gap[1]}`);\n      } else if (this.gap.length === 1) {\n        classes.push(`hds-layout-flex--row-gap-${this.gap[0]}`);\n        classes.push(`hds-layout-flex--column-gap-${this.gap[0]}`);\n      }\n    }\n\n    // add a class based on the @wrap argument\n    if (this.args.wrap) {\n      classes.push('hds-layout-flex--has-wrapping');\n    }\n\n    // add a class based on the @isInline argument\n    if (this.args.isInline) {\n      classes.push('hds-layout-flex--is-inline');\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["DEFAULT_DIRECTION","HdsLayoutFlexDirectionValues","Row","DIRECTIONS","Object","values","JUSTIFYS","HdsLayoutFlexJustifyValues","ALIGNS","HdsLayoutFlexAlignValues","DEFAULT_GAP","HdsLayoutFlexGapValues","Zero","GAPS","HdsLayoutFlex","Component","componentTag","args","tag","direction","assert","join","includes","justify","align","gap","Array","isArray","length","undefined","classNames","classes","push","wrap","isInline","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/layout/flex/types.js

@@ -25,6 +25,7 @@ let HdsLayoutFlexAlignValues = /*#__PURE__*/function (HdsLayoutFlexAlignValues)
   return HdsLayoutFlexAlignValues;
 }({});
 let HdsLayoutFlexGapValues = /*#__PURE__*/function (HdsLayoutFlexGapValues) {
+  HdsLayoutFlexGapValues["Zero"] = "0";
   HdsLayoutFlexGapValues["Four"] = "4";
   HdsLayoutFlexGapValues["Eight"] = "8";
   HdsLayoutFlexGapValues["Twelve"] = "12";

package/dist/components/hds/layout/flex/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../../src/components/hds/layout/flex/types.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nexport enum HdsLayoutFlexDirectionValues {\n  Row = 'row',\n  Column = 'column',\n}\n\nexport type HdsLayoutFlexDirections = `${HdsLayoutFlexDirectionValues}`;\n\nexport enum HdsLayoutFlexJustifyValues {\n  Start = 'start',\n  Center = 'center',\n  End = 'end',\n  SpaceBetween = 'space-between',\n  SpaceAround = 'space-around',\n  SpaceEvenly = 'space-evenly',\n}\n\nexport type HdsLayoutFlexJustifys = `${HdsLayoutFlexJustifyValues}`;\n\nexport enum HdsLayoutFlexAlignValues {\n  Start = 'start',\n  Center = 'center',\n  End = 'end',\n  Stretch = 'stretch',\n}\n\nexport type HdsLayoutFlexAligns = `${HdsLayoutFlexAlignValues}`;\n\nexport enum HdsLayoutFlexGapValues {\n  'Four' = '4',\n  'Eight' = '8',\n  'Twelve' = '12',\n  'Sixteen' = '16',\n  'TwentyFour' = '24',\n  'ThirtyTwo' = '32',\n  'FortyEight' = '48',\n}\n\nexport type HdsLayoutFlexGaps = `${HdsLayoutFlexGapValues}`;\n\n// A list of all existing tag names in the HTMLElementTagNameMap interface\nexport type AvailableTagNames = keyof HTMLElementTagNameMap;\n// A union of all types in the HTMLElementTagNameMap interface\nexport type AvailableElements =\n  HTMLElementTagNameMap[keyof HTMLElementTagNameMap];\n"],"names":["HdsLayoutFlexDirectionValues","HdsLayoutFlexJustifyValues","HdsLayoutFlexAlignValues","HdsLayoutFlexGapValues"],"mappings":"AAAA;AACA;AACA;AACA;;AAEYA,IAAAA,4BAA4B,0BAA5BA,4BAA4B,EAAA;EAA5BA,4BAA4B,CAAA,KAAA,CAAA,GAAA,KAAA;EAA5BA,4BAA4B,CAAA,QAAA,CAAA,GAAA,QAAA;AAAA,EAAA,OAA5BA,4BAA4B;AAAA,CAAA,CAAA,EAAA;AAO5BC,IAAAA,0BAA0B,0BAA1BA,0BAA0B,EAAA;EAA1BA,0BAA0B,CAAA,OAAA,CAAA,GAAA,OAAA;EAA1BA,0BAA0B,CAAA,QAAA,CAAA,GAAA,QAAA;EAA1BA,0BAA0B,CAAA,KAAA,CAAA,GAAA,KAAA;EAA1BA,0BAA0B,CAAA,cAAA,CAAA,GAAA,eAAA;EAA1BA,0BAA0B,CAAA,aAAA,CAAA,GAAA,cAAA;EAA1BA,0BAA0B,CAAA,aAAA,CAAA,GAAA,cAAA;AAAA,EAAA,OAA1BA,0BAA0B;AAAA,CAAA,CAAA,EAAA;AAW1BC,IAAAA,wBAAwB,0BAAxBA,wBAAwB,EAAA;EAAxBA,wBAAwB,CAAA,OAAA,CAAA,GAAA,OAAA;EAAxBA,wBAAwB,CAAA,QAAA,CAAA,GAAA,QAAA;EAAxBA,wBAAwB,CAAA,KAAA,CAAA,GAAA,KAAA;EAAxBA,wBAAwB,CAAA,SAAA,CAAA,GAAA,SAAA;AAAA,EAAA,OAAxBA,wBAAwB;AAAA,CAAA,CAAA,EAAA;AASxBC,IAAAA,sBAAsB,0BAAtBA,sBAAsB,EAAA;EAAtBA,sBAAsB,CAAA,MAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,OAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,QAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,SAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,YAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,WAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,YAAA,CAAA,GAAA,IAAA;AAAA,EAAA,OAAtBA,sBAAsB;AAAA,CAAA,CAAA,EAAA;;AAYlC;;AAEA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../../src/components/hds/layout/flex/types.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nexport enum HdsLayoutFlexDirectionValues {\n  Row = 'row',\n  Column = 'column',\n}\n\nexport type HdsLayoutFlexDirections = `${HdsLayoutFlexDirectionValues}`;\n\nexport enum HdsLayoutFlexJustifyValues {\n  Start = 'start',\n  Center = 'center',\n  End = 'end',\n  SpaceBetween = 'space-between',\n  SpaceAround = 'space-around',\n  SpaceEvenly = 'space-evenly',\n}\n\nexport type HdsLayoutFlexJustifys = `${HdsLayoutFlexJustifyValues}`;\n\nexport enum HdsLayoutFlexAlignValues {\n  Start = 'start',\n  Center = 'center',\n  End = 'end',\n  Stretch = 'stretch',\n}\n\nexport type HdsLayoutFlexAligns = `${HdsLayoutFlexAlignValues}`;\n\nexport enum HdsLayoutFlexGapValues {\n  'Zero' = '0',\n  'Four' = '4',\n  'Eight' = '8',\n  'Twelve' = '12',\n  'Sixteen' = '16',\n  'TwentyFour' = '24',\n  'ThirtyTwo' = '32',\n  'FortyEight' = '48',\n}\n\nexport type HdsLayoutFlexGaps = `${HdsLayoutFlexGapValues}`;\n\n// A list of all existing tag names in the HTMLElementTagNameMap interface\nexport type AvailableTagNames = keyof HTMLElementTagNameMap;\n// A union of all types in the HTMLElementTagNameMap interface\nexport type AvailableElements =\n  HTMLElementTagNameMap[keyof HTMLElementTagNameMap];\n"],"names":["HdsLayoutFlexDirectionValues","HdsLayoutFlexJustifyValues","HdsLayoutFlexAlignValues","HdsLayoutFlexGapValues"],"mappings":"AAAA;AACA;AACA;AACA;;AAEYA,IAAAA,4BAA4B,0BAA5BA,4BAA4B,EAAA;EAA5BA,4BAA4B,CAAA,KAAA,CAAA,GAAA,KAAA;EAA5BA,4BAA4B,CAAA,QAAA,CAAA,GAAA,QAAA;AAAA,EAAA,OAA5BA,4BAA4B;AAAA,CAAA,CAAA,EAAA;AAO5BC,IAAAA,0BAA0B,0BAA1BA,0BAA0B,EAAA;EAA1BA,0BAA0B,CAAA,OAAA,CAAA,GAAA,OAAA;EAA1BA,0BAA0B,CAAA,QAAA,CAAA,GAAA,QAAA;EAA1BA,0BAA0B,CAAA,KAAA,CAAA,GAAA,KAAA;EAA1BA,0BAA0B,CAAA,cAAA,CAAA,GAAA,eAAA;EAA1BA,0BAA0B,CAAA,aAAA,CAAA,GAAA,cAAA;EAA1BA,0BAA0B,CAAA,aAAA,CAAA,GAAA,cAAA;AAAA,EAAA,OAA1BA,0BAA0B;AAAA,CAAA,CAAA,EAAA;AAW1BC,IAAAA,wBAAwB,0BAAxBA,wBAAwB,EAAA;EAAxBA,wBAAwB,CAAA,OAAA,CAAA,GAAA,OAAA;EAAxBA,wBAAwB,CAAA,QAAA,CAAA,GAAA,QAAA;EAAxBA,wBAAwB,CAAA,KAAA,CAAA,GAAA,KAAA;EAAxBA,wBAAwB,CAAA,SAAA,CAAA,GAAA,SAAA;AAAA,EAAA,OAAxBA,wBAAwB;AAAA,CAAA,CAAA,EAAA;AASxBC,IAAAA,sBAAsB,0BAAtBA,sBAAsB,EAAA;EAAtBA,sBAAsB,CAAA,MAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,MAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,OAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,QAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,SAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,YAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,WAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,YAAA,CAAA,GAAA,IAAA;AAAA,EAAA,OAAtBA,sBAAsB;AAAA,CAAA,CAAA,EAAA;;AAalC;;AAEA;;;;"}

package/dist/components/hds/layout/grid/index.js

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
-import { HdsLayoutGridAlignValues, HdsLayoutGridGapValues } from './types.js';
+import { HdsLayoutGridGapValues, HdsLayoutGridAlignValues } from './types.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -12,6 +12,7 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
  */
 
 const ALIGNS = Object.values(HdsLayoutGridAlignValues);
+const DEFAULT_GAP = HdsLayoutGridGapValues.Zero;
 const GAPS = Object.values(HdsLayoutGridGapValues);
 class HdsLayoutGrid extends Component {
   get componentTag() {
@@ -28,7 +29,7 @@ class HdsLayoutGrid extends Component {
   }
   get gap() {
     const {
-      gap
+      gap = DEFAULT_GAP
     } = this.args;
     if (gap) {
       assert(`@gap for "Hds::Layout::Grid" must be a single value or an array of two values of one of the following: ${GAPS.join(', '
@@ -87,5 +88,5 @@ class HdsLayoutGrid extends Component {
 }
 setComponentTemplate(TEMPLATE, HdsLayoutGrid);
 
-export { ALIGNS, GAPS, HdsLayoutGrid as default };
+export { ALIGNS, DEFAULT_GAP, GAPS, HdsLayoutGrid as default };
 //# sourceMappingURL=index.js.map

package/dist/components/hds/layout/grid/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/layout/grid/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { assert } from '@ember/debug';\n\nimport type { ComponentLike } from '@glint/template';\nimport type { HdsLayoutGridItemSignature } from '../grid/item.ts';\n\nimport { HdsLayoutGridAlignValues, HdsLayoutGridGapValues } from './types.ts';\n\nimport type {\n  HdsLayoutGridAligns,\n  HdsLayoutGridGaps,\n  AvailableTagNames,\n  AvailableElements,\n} from './types.ts';\n\nexport const ALIGNS: string[] = Object.values(HdsLayoutGridAlignValues);\nexport const GAPS: string[] = Object.values(HdsLayoutGridGapValues);\n\nexport interface HdsLayoutGridSignature {\n  Args: {\n    tag?: AvailableTagNames;\n    columnMinWidth?: string;\n    columnWidth?: string;\n    align?: HdsLayoutGridAligns;\n    gap?: HdsLayoutGridGaps | [HdsLayoutGridGaps, HdsLayoutGridGaps];\n  };\n  Blocks: {\n    default: [\n      {\n        Item?: ComponentLike<HdsLayoutGridItemSignature>;\n      },\n    ];\n  };\n  Element: AvailableElements;\n}\n\nexport default class HdsLayoutGrid extends Component<HdsLayoutGridSignature> {\n  get componentTag(): AvailableTagNames {\n    return this.args.tag ?? 'div';\n  }\n\n  get align(): HdsLayoutGridAligns | undefined {\n    const { align } = this.args;\n\n    if (align) {\n      assert(\n        `@align for \"Hds::Layout::Grid\" must be one of the following: ${ALIGNS.join(\n          ', '\n        )}; received: ${align}`,\n        ALIGNS.includes(align)\n      );\n    }\n\n    return align;\n  }\n\n  get gap():\n    | [HdsLayoutGridGaps]\n    | [HdsLayoutGridGaps, HdsLayoutGridGaps]\n    | undefined {\n    const { gap } = this.args;\n\n    if (gap) {\n      assert(\n        `@gap for \"Hds::Layout::Grid\" must be a single value or an array of two values of one of the following: ${GAPS.join(\n          ', '\n          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n        )}; received: ${gap}`,\n        (!Array.isArray(gap) && GAPS.includes(gap)) ||\n          (Array.isArray(gap) &&\n            gap.length === 2 &&\n            GAPS.includes(gap[0]) &&\n            GAPS.includes(gap[1]))\n      );\n      return Array.isArray(gap) ? gap : [gap];\n    } else {\n      return undefined;\n    }\n  }\n\n  /*\n    LOGIC:\n\n    If columnMinWidth is passed in:\n    1) we set --hds-layout-grid-column-min-width to the passed in value\n    2) We use the fallback value of \"auto-fit\" for --hds-layout-grid-column-fill-type (reults in a more fluid layout)\n\n    If columnWidth is passed in:\n    1) we set --hds-layout-grid-column-min-width to the passed in value\n    2) we set --hds-layout-grid-column-fill-type to \"auto-fill\" (results in a more fixed layout)\n\n    If both columnMinWidth & columnWidth are passed in:\n    1) We throw an error, as it doesn't make sense in the context of a CSS grid layout (too complex to determine which to use & desired behavior)\n  */\n  get inlineStyles(): Record<string, unknown> {\n    const inlineStyles: {\n      '--hds-layout-grid-column-min-width'?: string;\n      '--hds-layout-grid-column-fill-type'?: string;\n    } = {};\n\n    // if both columnMinWidth and columnWidth are passed in, we throw an error\n    assert(\n      `@columnMinWidth and @columnWidth for \"Hds::Layout::Grid\" cannot be used together`,\n      !(this.args.columnMinWidth && this.args.columnWidth)\n    );\n\n    if (this.args.columnMinWidth) {\n      inlineStyles['--hds-layout-grid-column-min-width'] =\n        this.args.columnMinWidth;\n    } else if (this.args.columnWidth) {\n      inlineStyles['--hds-layout-grid-column-min-width'] =\n        this.args.columnWidth;\n      inlineStyles['--hds-layout-grid-column-fill-type'] = 'auto-fill';\n    }\n\n    return inlineStyles;\n  }\n\n  get classNames(): string {\n    const classes = ['hds-layout-grid'];\n\n    // add a class based on the @align argument\n    if (this.align) {\n      classes.push(`hds-layout-grid--align-items-${this.align}`);\n    }\n\n    // add a class based on the @gap argument\n    if (this.gap) {\n      if (this.gap.length === 2) {\n        classes.push(`hds-layout-grid--row-gap-${this.gap[0]}`);\n        classes.push(`hds-layout-grid--column-gap-${this.gap[1]}`);\n      } else if (this.gap.length === 1) {\n        classes.push(`hds-layout-grid--row-gap-${this.gap[0]}`);\n        classes.push(`hds-layout-grid--column-gap-${this.gap[0]}`);\n      }\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["ALIGNS","Object","values","HdsLayoutGridAlignValues","GAPS","HdsLayoutGridGapValues","HdsLayoutGrid","Component","componentTag","args","tag","align","assert","join","includes","gap","Array","isArray","length","undefined","inlineStyles","columnMinWidth","columnWidth","classNames","classes","push","setComponentTemplate","TEMPLATE"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/layout/grid/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { assert } from '@ember/debug';\n\nimport type { ComponentLike } from '@glint/template';\nimport type { HdsLayoutGridItemSignature } from '../grid/item.ts';\n\nimport { HdsLayoutGridAlignValues, HdsLayoutGridGapValues } from './types.ts';\n\nimport type {\n  HdsLayoutGridAligns,\n  HdsLayoutGridGaps,\n  AvailableTagNames,\n  AvailableElements,\n} from './types.ts';\n\nexport const ALIGNS: string[] = Object.values(HdsLayoutGridAlignValues);\nexport const DEFAULT_GAP = HdsLayoutGridGapValues.Zero;\nexport const GAPS: string[] = Object.values(HdsLayoutGridGapValues);\n\nexport interface HdsLayoutGridSignature {\n  Args: {\n    tag?: AvailableTagNames;\n    columnMinWidth?: string;\n    columnWidth?: string;\n    align?: HdsLayoutGridAligns;\n    gap?: HdsLayoutGridGaps | [HdsLayoutGridGaps, HdsLayoutGridGaps];\n  };\n  Blocks: {\n    default: [\n      {\n        Item?: ComponentLike<HdsLayoutGridItemSignature>;\n      },\n    ];\n  };\n  Element: AvailableElements;\n}\n\nexport default class HdsLayoutGrid extends Component<HdsLayoutGridSignature> {\n  get componentTag(): AvailableTagNames {\n    return this.args.tag ?? 'div';\n  }\n\n  get align(): HdsLayoutGridAligns | undefined {\n    const { align } = this.args;\n\n    if (align) {\n      assert(\n        `@align for \"Hds::Layout::Grid\" must be one of the following: ${ALIGNS.join(\n          ', '\n        )}; received: ${align}`,\n        ALIGNS.includes(align)\n      );\n    }\n\n    return align;\n  }\n\n  get gap():\n    | [HdsLayoutGridGaps]\n    | [HdsLayoutGridGaps, HdsLayoutGridGaps]\n    | undefined {\n    const { gap = DEFAULT_GAP } = this.args;\n\n    if (gap) {\n      assert(\n        `@gap for \"Hds::Layout::Grid\" must be a single value or an array of two values of one of the following: ${GAPS.join(\n          ', '\n          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n        )}; received: ${gap}`,\n        (!Array.isArray(gap) && GAPS.includes(gap)) ||\n          (Array.isArray(gap) &&\n            gap.length === 2 &&\n            GAPS.includes(gap[0]) &&\n            GAPS.includes(gap[1]))\n      );\n      return Array.isArray(gap) ? gap : [gap];\n    } else {\n      return undefined;\n    }\n  }\n\n  /*\n    LOGIC:\n\n    If columnMinWidth is passed in:\n    1) we set --hds-layout-grid-column-min-width to the passed in value\n    2) We use the fallback value of \"auto-fit\" for --hds-layout-grid-column-fill-type (reults in a more fluid layout)\n\n    If columnWidth is passed in:\n    1) we set --hds-layout-grid-column-min-width to the passed in value\n    2) we set --hds-layout-grid-column-fill-type to \"auto-fill\" (results in a more fixed layout)\n\n    If both columnMinWidth & columnWidth are passed in:\n    1) We throw an error, as it doesn't make sense in the context of a CSS grid layout (too complex to determine which to use & desired behavior)\n  */\n  get inlineStyles(): Record<string, unknown> {\n    const inlineStyles: {\n      '--hds-layout-grid-column-min-width'?: string;\n      '--hds-layout-grid-column-fill-type'?: string;\n    } = {};\n\n    // if both columnMinWidth and columnWidth are passed in, we throw an error\n    assert(\n      `@columnMinWidth and @columnWidth for \"Hds::Layout::Grid\" cannot be used together`,\n      !(this.args.columnMinWidth && this.args.columnWidth)\n    );\n\n    if (this.args.columnMinWidth) {\n      inlineStyles['--hds-layout-grid-column-min-width'] =\n        this.args.columnMinWidth;\n    } else if (this.args.columnWidth) {\n      inlineStyles['--hds-layout-grid-column-min-width'] =\n        this.args.columnWidth;\n      inlineStyles['--hds-layout-grid-column-fill-type'] = 'auto-fill';\n    }\n\n    return inlineStyles;\n  }\n\n  get classNames(): string {\n    const classes = ['hds-layout-grid'];\n\n    // add a class based on the @align argument\n    if (this.align) {\n      classes.push(`hds-layout-grid--align-items-${this.align}`);\n    }\n\n    // add a class based on the @gap argument\n    if (this.gap) {\n      if (this.gap.length === 2) {\n        classes.push(`hds-layout-grid--row-gap-${this.gap[0]}`);\n        classes.push(`hds-layout-grid--column-gap-${this.gap[1]}`);\n      } else if (this.gap.length === 1) {\n        classes.push(`hds-layout-grid--row-gap-${this.gap[0]}`);\n        classes.push(`hds-layout-grid--column-gap-${this.gap[0]}`);\n      }\n    }\n\n    return classes.join(' ');\n  }\n}\n"],"names":["ALIGNS","Object","values","HdsLayoutGridAlignValues","DEFAULT_GAP","HdsLayoutGridGapValues","Zero","GAPS","HdsLayoutGrid","Component","componentTag","args","tag","align","assert","join","includes","gap","Array","isArray","length","undefined","inlineStyles","columnMinWidth","columnWidth","classNames","classes","push","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/layout/grid/types.js

@@ -11,6 +11,7 @@ let HdsLayoutGridAlignValues = /*#__PURE__*/function (HdsLayoutGridAlignValues)
   return HdsLayoutGridAlignValues;
 }({});
 let HdsLayoutGridGapValues = /*#__PURE__*/function (HdsLayoutGridGapValues) {
+  HdsLayoutGridGapValues["Zero"] = "0";
   HdsLayoutGridGapValues["Four"] = "4";
   HdsLayoutGridGapValues["Eight"] = "8";
   HdsLayoutGridGapValues["Twelve"] = "12";

package/dist/components/hds/layout/grid/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../../src/components/hds/layout/grid/types.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nexport enum HdsLayoutGridAlignValues {\n  Start = 'start',\n  Center = 'center',\n  End = 'end',\n  Stretch = 'stretch',\n}\n\nexport type HdsLayoutGridAligns = `${HdsLayoutGridAlignValues}`;\n\nexport enum HdsLayoutGridGapValues {\n  'Four' = '4',\n  'Eight' = '8',\n  'Twelve' = '12',\n  'Sixteen' = '16',\n  'TwentyFour' = '24',\n  'ThirtyTwo' = '32',\n  'FortyEight' = '48',\n}\n\nexport type HdsLayoutGridGaps = `${HdsLayoutGridGapValues}`;\n\n// A list of all existing tag names in the HTMLElementTagNameMap interface\nexport type AvailableTagNames = keyof HTMLElementTagNameMap;\n// A union of all types in the HTMLElementTagNameMap interface\nexport type AvailableElements =\n  HTMLElementTagNameMap[keyof HTMLElementTagNameMap];\n"],"names":["HdsLayoutGridAlignValues","HdsLayoutGridGapValues"],"mappings":"AAAA;AACA;AACA;AACA;;AAEYA,IAAAA,wBAAwB,0BAAxBA,wBAAwB,EAAA;EAAxBA,wBAAwB,CAAA,OAAA,CAAA,GAAA,OAAA;EAAxBA,wBAAwB,CAAA,QAAA,CAAA,GAAA,QAAA;EAAxBA,wBAAwB,CAAA,KAAA,CAAA,GAAA,KAAA;EAAxBA,wBAAwB,CAAA,SAAA,CAAA,GAAA,SAAA;AAAA,EAAA,OAAxBA,wBAAwB;AAAA,CAAA,CAAA,EAAA;AASxBC,IAAAA,sBAAsB,0BAAtBA,sBAAsB,EAAA;EAAtBA,sBAAsB,CAAA,MAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,OAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,QAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,SAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,YAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,WAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,YAAA,CAAA,GAAA,IAAA;AAAA,EAAA,OAAtBA,sBAAsB;AAAA,CAAA,CAAA,EAAA;;AAYlC;;AAEA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../../src/components/hds/layout/grid/types.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nexport enum HdsLayoutGridAlignValues {\n  Start = 'start',\n  Center = 'center',\n  End = 'end',\n  Stretch = 'stretch',\n}\n\nexport type HdsLayoutGridAligns = `${HdsLayoutGridAlignValues}`;\n\nexport enum HdsLayoutGridGapValues {\n  'Zero' = '0',\n  'Four' = '4',\n  'Eight' = '8',\n  'Twelve' = '12',\n  'Sixteen' = '16',\n  'TwentyFour' = '24',\n  'ThirtyTwo' = '32',\n  'FortyEight' = '48',\n}\n\nexport type HdsLayoutGridGaps = `${HdsLayoutGridGapValues}`;\n\n// A list of all existing tag names in the HTMLElementTagNameMap interface\nexport type AvailableTagNames = keyof HTMLElementTagNameMap;\n// A union of all types in the HTMLElementTagNameMap interface\nexport type AvailableElements =\n  HTMLElementTagNameMap[keyof HTMLElementTagNameMap];\n"],"names":["HdsLayoutGridAlignValues","HdsLayoutGridGapValues"],"mappings":"AAAA;AACA;AACA;AACA;;AAEYA,IAAAA,wBAAwB,0BAAxBA,wBAAwB,EAAA;EAAxBA,wBAAwB,CAAA,OAAA,CAAA,GAAA,OAAA;EAAxBA,wBAAwB,CAAA,QAAA,CAAA,GAAA,QAAA;EAAxBA,wBAAwB,CAAA,KAAA,CAAA,GAAA,KAAA;EAAxBA,wBAAwB,CAAA,SAAA,CAAA,GAAA,SAAA;AAAA,EAAA,OAAxBA,wBAAwB;AAAA,CAAA,CAAA,EAAA;AASxBC,IAAAA,sBAAsB,0BAAtBA,sBAAsB,EAAA;EAAtBA,sBAAsB,CAAA,MAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,MAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,OAAA,CAAA,GAAA,GAAA;EAAtBA,sBAAsB,CAAA,QAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,SAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,YAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,WAAA,CAAA,GAAA,IAAA;EAAtBA,sBAAsB,CAAA,YAAA,CAAA,GAAA,IAAA;AAAA,EAAA,OAAtBA,sBAAsB;AAAA,CAAA,CAAA,EAAA;;AAalC;;AAEA;;;;"}

package/dist/styles/@hashicorp/design-system-components.css

@@ -6705,7 +6705,7 @@ button.hds-button[href]::after {
  */
 .hds-layout-flex {
   display: flex;
-  gap: var(--hds-layout-flex-row-gap, 0) var(--hds-layout-flex-column-gap, 0);
+  gap: var(--hds-layout-flex-row-gap) var(--hds-layout-flex-column-gap);
 }
 
 .hds-layout-flex--is-inline {
@@ -6768,6 +6768,10 @@ button.hds-button[href]::after {
   align-items: stretch;
 }
 
+.hds-layout-flex--row-gap-0 {
+  --hds-layout-flex-row-gap: 0px;
+}
+
 .hds-layout-flex--row-gap-4 {
   --hds-layout-flex-row-gap: 4px;
 }
@@ -6796,6 +6800,10 @@ button.hds-button[href]::after {
   --hds-layout-flex-row-gap: 48px;
 }
 
+.hds-layout-flex--column-gap-0 {
+  --hds-layout-flex-column-gap: 0px;
+}
+
 .hds-layout-flex--column-gap-4 {
   --hds-layout-flex-column-gap: 4px;
 }
@@ -6853,9 +6861,10 @@ button.hds-button[href]::after {
  * SPDX-License-Identifier: MPL-2.0
  */
 .hds-layout-grid {
+  --hds-layout-grid-column-min-width: 0px;
   display: grid;
-  grid-template-columns: repeat(var(--hds-layout-grid-column-fill-type, auto-fit), minmax(calc(var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)), 1fr));
-  gap: var(--hds-layout-grid-row-gap, 0) var(--hds-layout-grid-column-gap, 0);
+  grid-template-columns: repeat(var(--hds-layout-grid-column-fill-type, auto-fit), minmax(calc(var(--hds-layout-grid-column-min-width) - var(--hds-layout-grid-column-gap)), 1fr));
+  gap: var(--hds-layout-grid-row-gap) var(--hds-layout-grid-column-gap);
 }
 
 .hds-layout-grid--align-items-start {
@@ -6874,6 +6883,10 @@ button.hds-button[href]::after {
   align-items: stretch;
 }
 
+.hds-layout-grid--row-gap-0 {
+  --hds-layout-grid-row-gap: 0px;
+}
+
 .hds-layout-grid--row-gap-4 {
   --hds-layout-grid-row-gap: 4px;
 }
@@ -6902,6 +6915,10 @@ button.hds-button[href]::after {
   --hds-layout-grid-row-gap: 48px;
 }
 
+.hds-layout-grid--column-gap-0 {
+  --hds-layout-grid-column-gap: 0px;
+}
+
 .hds-layout-grid--column-gap-4 {
   --hds-layout-grid-column-gap: 4px;
 }

package/dist/styles/components/layout/flex.scss

@@ -13,7 +13,7 @@
   // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
   // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
   // These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
-  gap: var(--hds-layout-flex-row-gap, 0) var(--hds-layout-flex-column-gap, 0);
+  gap: var(--hds-layout-flex-row-gap) var(--hds-layout-flex-column-gap);
 }
 
 // inline
@@ -88,6 +88,11 @@
 
 // gap
 
+// row
+.hds-layout-flex--row-gap-0 {
+  --hds-layout-flex-row-gap: 0px;
+}
+
 .hds-layout-flex--row-gap-4 {
   --hds-layout-flex-row-gap: 4px;
 }
@@ -116,6 +121,11 @@
   --hds-layout-flex-row-gap: 48px;
 }
 
+// column
+.hds-layout-flex--column-gap-0 {
+  --hds-layout-flex-column-gap: 0px;
+}
+
 .hds-layout-flex--column-gap-4 {
   --hds-layout-flex-column-gap: 4px;
 }

package/dist/styles/components/layout/grid.scss

@@ -8,20 +8,23 @@
 //
 
 .hds-layout-grid {
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a default value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  // We initialize the variable here to prevent inheritance issues in nested grids
+  --hds-layout-grid-column-min-width: 0px;
+
   display: grid;
-  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
 
-  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
-  // https://drafts.csswg.org/css-values/#calc-type-checking
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
   grid-template-columns: repeat(
     var(--hds-layout-grid-column-fill-type, auto-fit),
-    minmax(calc(var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)), 1fr)
+    minmax(calc(var(--hds-layout-grid-column-min-width) - var(--hds-layout-grid-column-gap)), 1fr)
   );
 
   // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
   // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
   // These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
-  gap: var(--hds-layout-grid-row-gap, 0) var(--hds-layout-grid-column-gap, 0);
+  gap: var(--hds-layout-grid-row-gap) var(--hds-layout-grid-column-gap);
 }
 
 // align
@@ -46,6 +49,11 @@
 
 // We set the values of the gap custom properties overriding the default value of 0
 
+// row
+.hds-layout-grid--row-gap-0 {
+  --hds-layout-grid-row-gap: 0px;
+}
+
 .hds-layout-grid--row-gap-4 {
   --hds-layout-grid-row-gap: 4px;
 }
@@ -74,6 +82,11 @@
   --hds-layout-grid-row-gap: 48px;
 }
 
+// column
+.hds-layout-grid--column-gap-0 {
+  --hds-layout-grid-column-gap: 0px;
+}
+
 .hds-layout-grid--column-gap-4 {
   --hds-layout-grid-column-gap: 4px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "4.21.0",
+  "version": "4.22.0-rc-20250711180943",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",