@mittwald/flow-react-components 1.5.0-next.22 → 1.5.0-next.24

package/dist/js/packages/components/src/components/Combine/Combine.mjs

@@ -29,6 +29,7 @@ var CombineImplementation = (props) => {
 			className: Combine_module_default.icon,
 			color: "neutral"
 		},
+		Kbd: { className: Combine_module_default.kbd },
 		ContextualHelpTrigger: { Button: {
 			className: Combine_module_default.contextualHelpTriggerButton,
 			color: "secondary"

package/dist/js/packages/components/src/components/Combine/Combine.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Combine.mjs","names":[],"sources":["../../../../../../../src/components/Combine/Combine.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Combine.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface CombineProps\n  extends PropsWithChildren, PropsWithClassName, FlowComponentProps {}\n\n/**\n * The arrangement itself, shared with the deprecated `Align` alias so both\n * names render the exact same output.\n */\nexport const CombineImplementation: FC<CombineProps> = (props) => {\n  const { children, className } = props;\n\n  const rootClassName = clsx(styles.combine, className);\n\n  const propsContext: PropsContext = {\n    Text: { className: styles.text },\n    Button: { className: styles.button },\n    Avatar: { className: styles.avatar, size: \"m\" },\n    CopyButton: { size: \"s\", className: styles.copyButton },\n    Icon: { size: \"s\", className: styles.icon, color: \"neutral\" },\n    ContextualHelpTrigger: {\n      Button: {\n        className: styles.contextualHelpTriggerButton,\n        color: \"secondary\",\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <div className={rootClassName}>{children}</div>\n    </PropsContextProvider>\n  );\n};\n\n/**\n * @flowStatus new\n * @flr-generate all\n */\nexport const Combine = flowComponent(\"Combine\", CombineImplementation, {\n  type: \"layout\",\n});\n\nexport default Combine;\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAa,yBAA2C,UAAU;CAChE,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,MAAM,eAA6B;EACjC,MAAM,EAAE,WAAW,uBAAO,KAAK;EAC/B,QAAQ,EAAE,WAAW,uBAAO,OAAO;EACnC,QAAQ;GAAE,WAAW,uBAAO;GAAQ,MAAM;EAAI;EAC9C,YAAY;GAAE,MAAM;GAAK,WAAW,uBAAO;EAAW;EACtD,MAAM;GAAE,MAAM;GAAK,WAAW,uBAAO;GAAM,OAAO;EAAU;EAC5D,uBAAuB,EACrB,QAAQ;GACN,WAAW,uBAAO;GAClB,OAAO;EACT,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,OAAD;GAAK,WAAW;GAAgB;EAAc,CAAA;CAC1B,CAAA;AAE1B;;;;;AAMA,IAAa,UAAU,cAAc,WAAW,uBAAuB,EACrE,MAAM,SACR,CAAC"}
+{"version":3,"file":"Combine.mjs","names":[],"sources":["../../../../../../../src/components/Combine/Combine.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Combine.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface CombineProps\n  extends PropsWithChildren, PropsWithClassName, FlowComponentProps {}\n\n/**\n * The arrangement itself, shared with the deprecated `Align` alias so both\n * names render the exact same output.\n */\nexport const CombineImplementation: FC<CombineProps> = (props) => {\n  const { children, className } = props;\n\n  const rootClassName = clsx(styles.combine, className);\n\n  const propsContext: PropsContext = {\n    Text: { className: styles.text },\n    Button: { className: styles.button },\n    Avatar: { className: styles.avatar, size: \"m\" },\n    CopyButton: { size: \"s\", className: styles.copyButton },\n    Icon: { size: \"s\", className: styles.icon, color: \"neutral\" },\n    Kbd: { className: styles.kbd },\n    ContextualHelpTrigger: {\n      Button: {\n        className: styles.contextualHelpTriggerButton,\n        color: \"secondary\",\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <div className={rootClassName}>{children}</div>\n    </PropsContextProvider>\n  );\n};\n\n/**\n * @flowStatus new\n * @flr-generate all\n */\nexport const Combine = flowComponent(\"Combine\", CombineImplementation, {\n  type: \"layout\",\n});\n\nexport default Combine;\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAa,yBAA2C,UAAU;CAChE,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,MAAM,eAA6B;EACjC,MAAM,EAAE,WAAW,uBAAO,KAAK;EAC/B,QAAQ,EAAE,WAAW,uBAAO,OAAO;EACnC,QAAQ;GAAE,WAAW,uBAAO;GAAQ,MAAM;EAAI;EAC9C,YAAY;GAAE,MAAM;GAAK,WAAW,uBAAO;EAAW;EACtD,MAAM;GAAE,MAAM;GAAK,WAAW,uBAAO;GAAM,OAAO;EAAU;EAC5D,KAAK,EAAE,WAAW,uBAAO,IAAI;EAC7B,uBAAuB,EACrB,QAAQ;GACN,WAAW,uBAAO;GAClB,OAAO;EACT,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,OAAD;GAAK,WAAW;GAAgB;EAAc,CAAA;CAC1B,CAAA;AAE1B;;;;;AAMA,IAAa,UAAU,cAAc,WAAW,uBAAuB,EACrE,MAAM,SACR,CAAC"}

package/dist/js/packages/components/src/components/Combine/Combine.module.mjs

@@ -8,6 +8,7 @@ var button = "flow--combine--button";
 var contextualHelpTriggerButton = "flow--combine--contextual-help-trigger-button";
 var copyButton = "flow--combine--copy-button";
 var icon = "flow--combine--icon";
+var kbd = "flow--combine--kbd";
 var Combine_module_default = {
 	combine,
 	avatar,
@@ -15,9 +16,10 @@ var Combine_module_default = {
 	button,
 	contextualHelpTriggerButton,
 	copyButton,
-	icon
+	icon,
+	kbd
 };
 //#endregion
-export { avatar, button, combine, contextualHelpTriggerButton, copyButton, Combine_module_default as default, icon, text };
+export { avatar, button, combine, contextualHelpTriggerButton, copyButton, Combine_module_default as default, icon, kbd, text };
 
 //# sourceMappingURL=Combine.module.mjs.map

package/dist/js/packages/components/src/components/Combine/Combine.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Combine.module.mjs","names":[],"sources":["../../../../../../../src/components/Combine/Combine.module.scss"],"sourcesContent":[".combine {\n  &:has(.avatar):has(.text) {\n    display: flex;\n    gap: var(--combine--avatar-text--spacing);\n    height: fit-content;\n\n    --first-two-lines-height: calc(var(--line-height-s) * 2);\n\n    min-height: var(--first-two-lines-height);\n\n    .text {\n      flex-grow: 1;\n      display: flex;\n      flex-direction: column;\n      align-self: center;\n      font-size: var(--font-size-text--s);\n    }\n\n    .avatar {\n      margin-top: calc(\n        (var(--first-two-lines-height) - var(--avatar--size--m)) / 2\n      );\n    }\n  }\n\n  &:has(:global(.flow--form-field)):has(.button) {\n    display: flex;\n    align-items: flex-start;\n    column-gap: var(--combine--input-button--spacing);\n\n    :global(.flow--form-field) {\n      flex-grow: 1;\n    }\n\n    // `<label>` is also the root element react-aria renders for Checkbox and\n    // Switch, so `Label`'s class would not match the same set of children.\n    // stylelint-disable-next-line selector-max-type -- see above\n    &:has(label) {\n      .button {\n        margin-top: calc(var(--line-height-s) + var(--form-control--spacing-y));\n      }\n    }\n  }\n\n  &:has(.text):has(.contextualHelpTriggerButton),\n  &:has(.text):has(.copyButton) {\n    display: inline-flex;\n    align-items: center;\n    column-gap: var(--combine--text-button--spacing);\n  }\n\n  &:has(> .text):has(> .icon) {\n    display: inline-flex;\n    align-items: center;\n    column-gap: var(--combine--icon-text--spacing);\n  }\n}\n\n@media (max-width: 550px) {\n  .combine:has(:global(.flow--form-field)):has(.button) {\n    flex-direction: column;\n    row-gap: var(--section--spacing);\n    align-items: stretch;\n\n    .button {\n      width: 100%;\n    }\n\n    // stylelint-disable-next-line selector-max-type -- see the `:has(label)` above\n    &:has(label) {\n      .button {\n        margin-top: 0;\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Combine.module.mjs","names":[],"sources":["../../../../../../../src/components/Combine/Combine.module.scss"],"sourcesContent":[".combine {\n  &:has(.avatar):has(.text) {\n    display: flex;\n    gap: var(--combine--avatar-text--spacing);\n    height: fit-content;\n\n    --first-two-lines-height: calc(var(--line-height-s) * 2);\n\n    min-height: var(--first-two-lines-height);\n\n    .text {\n      flex-grow: 1;\n      display: flex;\n      flex-direction: column;\n      align-self: center;\n      font-size: var(--font-size-text--s);\n    }\n\n    .avatar {\n      margin-top: calc(\n        (var(--first-two-lines-height) - var(--avatar--size--m)) / 2\n      );\n    }\n  }\n\n  &:has(:global(.flow--form-field)):has(.button) {\n    display: flex;\n    align-items: flex-start;\n    column-gap: var(--combine--input-button--spacing);\n\n    :global(.flow--form-field) {\n      flex-grow: 1;\n    }\n\n    // `<label>` is also the root element react-aria renders for Checkbox and\n    // Switch, so `Label`'s class would not match the same set of children.\n    // stylelint-disable-next-line selector-max-type -- see above\n    &:has(label) {\n      .button {\n        margin-top: calc(var(--line-height-s) + var(--form-control--spacing-y));\n      }\n    }\n  }\n\n  &:has(.text):has(.contextualHelpTriggerButton),\n  &:has(.text):has(.copyButton) {\n    display: inline-flex;\n    align-items: center;\n    column-gap: var(--combine--text-button--spacing);\n  }\n\n  &:has(> .text):has(> .icon) {\n    display: inline-flex;\n    align-items: center;\n    column-gap: var(--combine--icon-text--spacing);\n  }\n\n  // Margins instead of a gap: keys sit closer to each other than to the text,\n  // e.g. \"↑ ↓ Select\" in one Combine.\n  &:has(> .kbd) {\n    display: inline-flex;\n    align-items: center;\n\n    > .kbd + .kbd {\n      margin-inline-start: var(--combine--kbd-kbd--spacing);\n    }\n\n    > .kbd + .text,\n    > .text + .kbd {\n      margin-inline-start: var(--combine--kbd-text--spacing);\n    }\n  }\n}\n\n@media (max-width: 550px) {\n  .combine:has(:global(.flow--form-field)):has(.button) {\n    flex-direction: column;\n    row-gap: var(--section--spacing);\n    align-items: stretch;\n\n    .button {\n      width: 100%;\n    }\n\n    // stylelint-disable-next-line selector-max-type -- see the `:has(label)` above\n    &:has(label) {\n      .button {\n        margin-top: 0;\n      }\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/LayoutCard/LayoutCard.mjs

@@ -13,7 +13,8 @@ var LayoutCard = flowComponent("LayoutCard", (props) => {
 	const Element = elementType;
 	const propsContext = {
 		TabNavigation: { className: LayoutCard_module_default.tabNavigation },
-		AccentBox: { className: LayoutCard_module_default.accentBox }
+		AccentBox: { className: LayoutCard_module_default.accentBox },
+		Alert: { className: LayoutCard_module_default.alert }
 	};
 	return /* @__PURE__ */ jsx(Element, {
 		className: rootClassName,

package/dist/js/packages/components/src/components/LayoutCard/LayoutCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutCard.mjs","names":[],"sources":["../../../../../../../src/components/LayoutCard/LayoutCard.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./LayoutCard.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface LayoutCardProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"main\" | \"footer\" | \"header\">,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const LayoutCard = flowComponent(\n  \"LayoutCard\",\n  (props) => {\n    const { children, className, elementType = \"div\", ref, ...rest } = props;\n\n    const rootClassName = clsx(styles.layoutCard, className);\n\n    const Element = elementType;\n\n    const propsContext: PropsContext = {\n      TabNavigation: {\n        className: styles.tabNavigation,\n      },\n      AccentBox: { className: styles.accentBox },\n    };\n\n    return (\n      <Element className={rootClassName} {...rest} ref={ref}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </Element>\n    );\n  },\n  { type: \"layout\" },\n);\n\nexport default LayoutCard;\n"],"mappings":";;;;;;;;;AAgBA,IAAa,aAAa,cACxB,eACC,UAAU;CACT,MAAM,EAAE,UAAU,WAAW,cAAc,OAAO,KAAK,GAAG,SAAS;CAEnE,MAAM,gBAAgB,KAAK,0BAAO,YAAY,SAAS;CAEvD,MAAM,UAAU;CAEhB,MAAM,eAA6B;EACjC,eAAe,EACb,WAAW,0BAAO,cACpB;EACA,WAAW,EAAE,WAAW,0BAAO,UAAU;CAC3C;CAEA,OACE,oBAAC,SAAD;EAAS,WAAW;EAAe,GAAI;EAAW;EAChD,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACf,CAAA;AAEb,GACA,EAAE,MAAM,SAAS,CACnB"}
+{"version":3,"file":"LayoutCard.mjs","names":[],"sources":["../../../../../../../src/components/LayoutCard/LayoutCard.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./LayoutCard.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface LayoutCardProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"main\" | \"footer\" | \"header\">,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const LayoutCard = flowComponent(\n  \"LayoutCard\",\n  (props) => {\n    const { children, className, elementType = \"div\", ref, ...rest } = props;\n\n    const rootClassName = clsx(styles.layoutCard, className);\n\n    const Element = elementType;\n\n    const propsContext: PropsContext = {\n      TabNavigation: {\n        className: styles.tabNavigation,\n      },\n      AccentBox: { className: styles.accentBox },\n      Alert: { className: styles.alert },\n    };\n\n    return (\n      <Element className={rootClassName} {...rest} ref={ref}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </Element>\n    );\n  },\n  { type: \"layout\" },\n);\n\nexport default LayoutCard;\n"],"mappings":";;;;;;;;;AAgBA,IAAa,aAAa,cACxB,eACC,UAAU;CACT,MAAM,EAAE,UAAU,WAAW,cAAc,OAAO,KAAK,GAAG,SAAS;CAEnE,MAAM,gBAAgB,KAAK,0BAAO,YAAY,SAAS;CAEvD,MAAM,UAAU;CAEhB,MAAM,eAA6B;EACjC,eAAe,EACb,WAAW,0BAAO,cACpB;EACA,WAAW,EAAE,WAAW,0BAAO,UAAU;EACzC,OAAO,EAAE,WAAW,0BAAO,MAAM;CACnC;CAEA,OACE,oBAAC,SAAD;EAAS,WAAW;EAAe,GAAI;EAAW;EAChD,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACf,CAAA;AAEb,GACA,EAAE,MAAM,SAAS,CACnB"}

package/dist/js/packages/components/src/components/LayoutCard/LayoutCard.module.mjs

@@ -3,13 +3,15 @@
 //#region src/components/LayoutCard/LayoutCard.module.scss
 var layoutCard = "flow--layout-card";
 var tabNavigation = "flow--layout-card--tab-navigation";
+var alert = "flow--layout-card--alert";
 var accentBox = "flow--layout-card--accent-box";
 var LayoutCard_module_default = {
 	layoutCard,
 	tabNavigation,
+	alert,
 	accentBox
 };
 //#endregion
-export { accentBox, LayoutCard_module_default as default, layoutCard, tabNavigation };
+export { accentBox, alert, LayoutCard_module_default as default, layoutCard, tabNavigation };
 
 //# sourceMappingURL=LayoutCard.module.mjs.map

package/dist/js/packages/components/src/components/LayoutCard/LayoutCard.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutCard.module.mjs","names":[],"sources":["../../../../../../../src/components/LayoutCard/LayoutCard.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.layoutCard {\n  @include scrollbar.scrollbar;\n\n  align-self: normal;\n  background-color: var(--layout-card--background-color);\n  box-shadow: var(--layout-card--box-shadow);\n  border-radius: var(--layout-card--corner-radius);\n  padding: var(--layout-card--padding);\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  border: var(--layout-card--border-width) var(--layout-card--border-style)\n    var(--layout-card--border-color);\n\n  > .tabNavigation {\n    margin-top: calc(var(--layout-card--padding) * -1);\n    margin-inline: calc(var(--layout-card--padding) * -1);\n    margin-bottom: var(--layout-card--padding);\n    border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n    border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n\n    :global(.flow--tab-navigation--item):first-child\n      :global(.flow--tab-navigation--link) {\n      border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n    }\n\n    :global(.flow--tab-navigation--more-button) {\n      border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n    }\n  }\n\n  &:has(> .accentBox:only-child) {\n    padding: 0;\n    border: none;\n\n    .accentBox {\n      padding: var(--layout-card--padding);\n      border-radius: calc(var(--layout-card--corner-radius) - 1px);\n      flex-grow: 1;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .layoutCard {\n    padding: var(--layout-card--padding-mobile);\n\n    > .tabNavigation {\n      margin-top: calc(var(--layout-card--padding-mobile) * -1);\n      margin-inline: calc(var(--layout-card--padding-mobile) * -1);\n      margin-bottom: var(--layout-card--padding-mobile);\n    }\n\n    &:has(> .accentBox:only-child) {\n      padding: 0;\n\n      .accentBox {\n        padding: var(--layout-card--padding-mobile);\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"LayoutCard.module.mjs","names":[],"sources":["../../../../../../../src/components/LayoutCard/LayoutCard.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.layoutCard {\n  @include scrollbar.scrollbar;\n\n  align-self: normal;\n  background-color: var(--layout-card--background-color);\n  box-shadow: var(--layout-card--box-shadow);\n  border-radius: var(--layout-card--corner-radius);\n  padding: var(--layout-card--padding);\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  border: var(--layout-card--border-width) var(--layout-card--border-style)\n    var(--layout-card--border-color);\n\n  > .tabNavigation {\n    margin-top: calc(var(--layout-card--padding) * -1);\n    margin-inline: calc(var(--layout-card--padding) * -1);\n    margin-bottom: var(--layout-card--padding);\n    border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n    border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n\n    :global(.flow--tab-navigation--item):first-child\n      :global(.flow--tab-navigation--link) {\n      border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n    }\n\n    :global(.flow--tab-navigation--more-button) {\n      border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n    }\n  }\n\n  /* Stacked page-wide alerts */\n  > .alert + .alert {\n    margin-block-start: var(--section--spacing);\n  }\n\n  &:has(> .accentBox:only-child) {\n    padding: 0;\n    border: none;\n\n    .accentBox {\n      padding: var(--layout-card--padding);\n      border-radius: calc(var(--layout-card--corner-radius) - 1px);\n      flex-grow: 1;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .layoutCard {\n    padding: var(--layout-card--padding-mobile);\n\n    > .tabNavigation {\n      margin-top: calc(var(--layout-card--padding-mobile) * -1);\n      margin-inline: calc(var(--layout-card--padding-mobile) * -1);\n      margin-bottom: var(--layout-card--padding-mobile);\n    }\n\n    &:has(> .accentBox:only-child) {\n      padding: 0;\n\n      .accentBox {\n        padding: var(--layout-card--padding-mobile);\n      }\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs

@@ -2692,6 +2692,22 @@ var combine = {
 			"icon-text",
 			"spacing"
 		]
+	} },
+	"kbd-kbd": { "spacing": {
+		"value": "0.25rem",
+		"path": [
+			"combine",
+			"kbd-kbd",
+			"spacing"
+		]
+	} },
+	"kbd-text": { "spacing": {
+		"value": "0.5rem",
+		"path": [
+			"combine",
+			"kbd-text",
+			"spacing"
+		]
 	} }
 };
 var list = {