jvetrau-ds 0.1.19 → 0.1.21

package/components/action-group/action-group.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('./action-group.css');
+var classnames = require('../helpers/classnames');
+
+const ActionGroup = ({
+  direction = "row",
+  align = "start",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames.classnames("action-group", className, {
+    "action-group--row": direction === "row",
+    "action-group--column": direction === "column",
+    "action-group--end": align === "end"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var action_group_default = ActionGroup;
+
+module.exports = action_group_default;
+//# sourceMappingURL=action-group.cjs.map
+//# sourceMappingURL=action-group.cjs.map

package/components/action-group/action-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/action-group/action-group.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AAUA,MAAM,cAA0C,CAAC;AAAA,EAC/C,SAAA,GAAY,KAAA;AAAA,EACZ,KAAA,GAAQ,OAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,cAAA,EAAgB,SAAA,EAAW;AAAA,IACpD,qBAAqB,SAAA,KAAc,KAAA;AAAA,IACnC,wBAAwB,SAAA,KAAc,QAAA;AAAA,IACtC,qBAAqB,KAAA,KAAU;AAAA,GAChC,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,oBAAA,GAAQ","file":"action-group.cjs","sourcesContent":["import React from 'react';\nimport './action-group.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface ActionGroupProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  direction?: 'row' | 'column';\n  align?: 'start' | 'end';\n}\n\nconst ActionGroup: React.FC<ActionGroupProps> = ({\n  direction = 'row',\n  align = 'start',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('action-group', className, {\n    'action-group--row': direction === 'row',\n    'action-group--column': direction === 'column',\n    'action-group--end': align === 'end',\n  });\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default ActionGroup;"]}

package/components/action-group/action-group.css

@@ -0,0 +1,24 @@
+.action-group {
+  display: flex;
+  gap: var(--margin-control);
+}
+
+.action-group--row {
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.action-group--column {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.action-group--end {
+  justify-content: flex-end;
+}
+
+.action-group--column.action-group--end {
+  align-items: flex-end;
+  justify-content: flex-start;
+}

package/components/action-group/action-group.d.cts

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface ActionGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    direction?: 'row' | 'column';
+    align?: 'start' | 'end';
+}
+declare const ActionGroup: React.FC<ActionGroupProps>;
+
+export { type ActionGroupProps, ActionGroup as default };

package/components/action-group/action-group.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface ActionGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    direction?: 'row' | 'column';
+    align?: 'start' | 'end';
+}
+declare const ActionGroup: React.FC<ActionGroupProps>;
+
+export { type ActionGroupProps, ActionGroup as default };

package/components/action-group/action-group.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import './action-group.css';
+import { classnames } from '../helpers/classnames';
+
+const ActionGroup = ({
+  direction = "row",
+  align = "start",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames("action-group", className, {
+    "action-group--row": direction === "row",
+    "action-group--column": direction === "column",
+    "action-group--end": align === "end"
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var action_group_default = ActionGroup;
+
+export { action_group_default as default };
+//# sourceMappingURL=action-group.js.map
+//# sourceMappingURL=action-group.js.map

package/components/action-group/action-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/action-group/action-group.tsx"],"names":[],"mappings":";;;;AAUA,MAAM,cAA0C,CAAC;AAAA,EAC/C,SAAA,GAAY,KAAA;AAAA,EACZ,KAAA,GAAQ,OAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,cAAA,EAAgB,SAAA,EAAW;AAAA,IACpD,qBAAqB,SAAA,KAAc,KAAA;AAAA,IACnC,wBAAwB,SAAA,KAAc,QAAA;AAAA,IACtC,qBAAqB,KAAA,KAAU;AAAA,GAChC,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,oBAAA,GAAQ","file":"action-group.js","sourcesContent":["import React from 'react';\nimport './action-group.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface ActionGroupProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  direction?: 'row' | 'column';\n  align?: 'start' | 'end';\n}\n\nconst ActionGroup: React.FC<ActionGroupProps> = ({\n  direction = 'row',\n  align = 'start',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('action-group', className, {\n    'action-group--row': direction === 'row',\n    'action-group--column': direction === 'column',\n    'action-group--end': align === 'end',\n  });\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default ActionGroup;"]}

package/components/action-group/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var actionGroup = require('./action-group');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var actionGroup__default = /*#__PURE__*/_interopDefault(actionGroup);
+
+
+
+module.exports = actionGroup__default.default;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/components/action-group/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs","sourcesContent":[]}

package/components/action-group/index.d.cts

@@ -0,0 +1,2 @@
+export { ActionGroupProps, default } from './action-group.cjs';
+import 'react';

package/components/action-group/index.d.ts

@@ -0,0 +1,2 @@
+export { ActionGroupProps, default } from './action-group.js';
+import 'react';

package/components/action-group/index.js

@@ -0,0 +1,3 @@
+export { default } from './action-group';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/action-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/components/field/field.css

@@ -1,10 +1,10 @@
 .field {
   /* color */
-  --field-label-color: var(--color-text);
+/*  --field-label-color: var(--color-text);*/
   --field-message-color: var(--color-text-note);
   --field-error-color: var(--color-line-bad);
 
-  color: var(--field-label-color);
+/*  color: var(--field-label-color);*/
 
   /* typography */
   --field-label-font-family: var(--font-body-family);
@@ -39,7 +39,7 @@
 
 .field__label {
   /* color */
-  color: var(--field-label-color);
+/*  color: var(--field-label-color);*/  
 
   /* typography */
   font-family: var(--field-label-font-family);

package/components/field-group/field-group.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('./field-group.css');
+var classnames = require('../helpers/classnames');
+
+const FieldGroup = ({
+  direction = "column",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames.classnames("field-group", className, {
+    "field-group--row": direction === "row",
+    "field-group--column": direction === "column"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var field_group_default = FieldGroup;
+
+module.exports = field_group_default;
+//# sourceMappingURL=field-group.cjs.map
+//# sourceMappingURL=field-group.cjs.map

package/components/field-group/field-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/field-group/field-group.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AASA,MAAM,aAAwC,CAAC;AAAA,EAC7C,SAAA,GAAY,QAAA;AAAA,EACZ,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,aAAA,EAAe,SAAA,EAAW;AAAA,IACnD,oBAAoB,SAAA,KAAc,KAAA;AAAA,IAClC,uBAAuB,SAAA,KAAc;AAAA,GACtC,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,mBAAA,GAAQ","file":"field-group.cjs","sourcesContent":["import React from 'react';\nimport './field-group.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FieldGroupProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  direction?: 'row' | 'column';\n}\n\nconst FieldGroup: React.FC<FieldGroupProps> = ({\n  direction = 'column',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('field-group', className, {\n    'field-group--row': direction === 'row',\n    'field-group--column': direction === 'column',\n  });\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default FieldGroup;"]}

package/components/field-group/field-group.css

@@ -0,0 +1,29 @@
+.field-group {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  --field-group-gap: var(--margin-form-field-vert);
+
+  display: flex;
+  align-items: stretch;
+  gap: var(--field-group-gap);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.field-group--row {
+  /* size */
+  flex-direction: row;
+}
+
+.field-group--column {
+  /* size */
+  flex-direction: column;
+}

package/components/field-group/field-group.d.cts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+interface FieldGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    direction?: 'row' | 'column';
+}
+declare const FieldGroup: React.FC<FieldGroupProps>;
+
+export { type FieldGroupProps, FieldGroup as default };

package/components/field-group/field-group.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+interface FieldGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    direction?: 'row' | 'column';
+}
+declare const FieldGroup: React.FC<FieldGroupProps>;
+
+export { type FieldGroupProps, FieldGroup as default };

package/components/field-group/field-group.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import './field-group.css';
+import { classnames } from '../helpers/classnames';
+
+const FieldGroup = ({
+  direction = "column",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames("field-group", className, {
+    "field-group--row": direction === "row",
+    "field-group--column": direction === "column"
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var field_group_default = FieldGroup;
+
+export { field_group_default as default };
+//# sourceMappingURL=field-group.js.map
+//# sourceMappingURL=field-group.js.map

package/components/field-group/field-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/field-group/field-group.tsx"],"names":[],"mappings":";;;;AASA,MAAM,aAAwC,CAAC;AAAA,EAC7C,SAAA,GAAY,QAAA;AAAA,EACZ,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,aAAA,EAAe,SAAA,EAAW;AAAA,IACnD,oBAAoB,SAAA,KAAc,KAAA;AAAA,IAClC,uBAAuB,SAAA,KAAc;AAAA,GACtC,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,mBAAA,GAAQ","file":"field-group.js","sourcesContent":["import React from 'react';\nimport './field-group.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FieldGroupProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  direction?: 'row' | 'column';\n}\n\nconst FieldGroup: React.FC<FieldGroupProps> = ({\n  direction = 'column',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('field-group', className, {\n    'field-group--row': direction === 'row',\n    'field-group--column': direction === 'column',\n  });\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default FieldGroup;"]}

package/components/field-group/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var fieldGroup = require('./field-group');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var fieldGroup__default = /*#__PURE__*/_interopDefault(fieldGroup);
+
+
+
+module.exports = fieldGroup__default.default;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/components/field-group/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs","sourcesContent":[]}

package/components/field-group/index.d.cts

@@ -0,0 +1,2 @@
+export { FieldGroupProps, default } from './field-group.cjs';
+import 'react';

package/components/field-group/index.d.ts

@@ -0,0 +1,2 @@
+export { FieldGroupProps, default } from './field-group.js';
+import 'react';

package/components/field-group/index.js

@@ -0,0 +1,3 @@
+export { default } from './field-group';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/field-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/components/index.cjs

@@ -19,6 +19,8 @@ var video = require('./video/video');
 var logo = require('./logo/logo');
 var avatar = require('./avatar/avatar');
 var attach = require('./attach/attach');
+var actionGroup = require('./action-group/action-group');
+var fieldGroup = require('./field-group/field-group');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -41,6 +43,8 @@ var video__default = /*#__PURE__*/_interopDefault(video);
 var logo__default = /*#__PURE__*/_interopDefault(logo);
 var avatar__default = /*#__PURE__*/_interopDefault(avatar);
 var attach__default = /*#__PURE__*/_interopDefault(attach);
+var actionGroup__default = /*#__PURE__*/_interopDefault(actionGroup);
+var fieldGroup__default = /*#__PURE__*/_interopDefault(fieldGroup);
 
 
 
@@ -120,5 +124,13 @@ Object.defineProperty(exports, "Attach", {
   enumerable: true,
   get: function () { return attach__default.default; }
 });
+Object.defineProperty(exports, "ActionGroup", {
+  enumerable: true,
+  get: function () { return actionGroup__default.default; }
+});
+Object.defineProperty(exports, "FieldGroup", {
+  enumerable: true,
+  get: function () { return fieldGroup__default.default; }
+});
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/components/index.d.cts

@@ -17,5 +17,7 @@ export { default as Video, VideoProps, VideoQuality } from './video/video.cjs';
 export { default as Logo, LogoProps } from './logo/logo.cjs';
 export { default as Avatar, AvatarProps } from './avatar/avatar.cjs';
 export { default as Attach, AttachItem, AttachProps } from './attach/attach.cjs';
+export { default as ActionGroup, ActionGroupProps } from './action-group/action-group.cjs';
+export { default as FieldGroup, FieldGroupProps } from './field-group/field-group.cjs';
 import 'react';
 import '../types-DboVOY__.cjs';

package/components/index.d.ts

@@ -17,5 +17,7 @@ export { default as Video, VideoProps, VideoQuality } from './video/video.js';
 export { default as Logo, LogoProps } from './logo/logo.js';
 export { default as Avatar, AvatarProps } from './avatar/avatar.js';
 export { default as Attach, AttachItem, AttachProps } from './attach/attach.js';
+export { default as ActionGroup, ActionGroupProps } from './action-group/action-group.js';
+export { default as FieldGroup, FieldGroupProps } from './field-group/field-group.js';
 import 'react';
 import '../types-DboVOY__.js';

package/components/index.js

@@ -17,5 +17,7 @@ export { default as Video } from './video/video';
 export { default as Logo } from './logo/logo';
 export { default as Avatar } from './avatar/avatar';
 export { default as Attach } from './attach/attach';
+export { default as ActionGroup } from './action-group/action-group';
+export { default as FieldGroup } from './field-group/field-group';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/components/tabs/tabs.css

@@ -100,6 +100,14 @@
     border-color var(--tabs-transition-duration);
 }
 
+.tabs__tab,
+.tabs__tab:active,
+.tabs__tab:focus,
+.tabs__tab:hover {
+  /* typography */
+  text-decoration: none;
+}
+
 .tabs__tab--selected {
   /* color */
   --tabs-tab-bg: var(--tabs-tab-bg-selected);

package/index.cjs

@@ -27,6 +27,8 @@ var foundation = require('./layouts/foundation');
 var base = require('./layouts/base');
 var sidebar = require('./layouts/sidebar');
 var attach = require('./components/attach');
+var actionGroup = require('./components/action-group');
+var fieldGroup = require('./components/field-group');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -57,6 +59,8 @@ var foundation__default = /*#__PURE__*/_interopDefault(foundation);
 var base__default = /*#__PURE__*/_interopDefault(base);
 var sidebar__default = /*#__PURE__*/_interopDefault(sidebar);
 var attach__default = /*#__PURE__*/_interopDefault(attach);
+var actionGroup__default = /*#__PURE__*/_interopDefault(actionGroup);
+var fieldGroup__default = /*#__PURE__*/_interopDefault(fieldGroup);
 
 
 
@@ -168,5 +172,13 @@ Object.defineProperty(exports, "Attach", {
   enumerable: true,
   get: function () { return attach__default.default; }
 });
+Object.defineProperty(exports, "ActionGroup", {
+  enumerable: true,
+  get: function () { return actionGroup__default.default; }
+});
+Object.defineProperty(exports, "FieldGroup", {
+  enumerable: true,
+  get: function () { return fieldGroup__default.default; }
+});
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/index.d.cts

@@ -25,5 +25,7 @@ export { default as LayoutFoundation, LayoutFoundationProps, LayoutFoundationWid
 export { default as LayoutBase, LayoutBaseProps } from './layouts/base/base.cjs';
 export { default as LayoutSidebar, LayoutSidebarProps } from './layouts/sidebar/sidebar.cjs';
 export { default as Attach, AttachItem, AttachProps } from './components/attach/attach.cjs';
+export { default as ActionGroup, ActionGroupProps } from './components/action-group/action-group.cjs';
+export { default as FieldGroup, FieldGroupProps } from './components/field-group/field-group.cjs';
 import 'react';
 import './types-DboVOY__.cjs';

package/index.d.ts

@@ -25,5 +25,7 @@ export { default as LayoutFoundation, LayoutFoundationProps, LayoutFoundationWid
 export { default as LayoutBase, LayoutBaseProps } from './layouts/base/base.js';
 export { default as LayoutSidebar, LayoutSidebarProps } from './layouts/sidebar/sidebar.js';
 export { default as Attach, AttachItem, AttachProps } from './components/attach/attach.js';
+export { default as ActionGroup, ActionGroupProps } from './components/action-group/action-group.js';
+export { default as FieldGroup, FieldGroupProps } from './components/field-group/field-group.js';
 import 'react';
 import './types-DboVOY__.js';

package/index.js

@@ -25,5 +25,7 @@ export { default as LayoutFoundation } from './layouts/foundation';
 export { default as LayoutBase } from './layouts/base';
 export { default as LayoutSidebar } from './layouts/sidebar';
 export { default as Attach } from './components/attach';
+export { default as ActionGroup } from './components/action-group';
+export { default as FieldGroup } from './components/field-group';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/styles.css

@@ -1,5 +1,31 @@
 /* AUTO-GENERATED FILE. DO NOT EDIT MANUALLY. */
 
+/* src/components/action-group/action-group.css */
+.action-group {
+  display: flex;
+  gap: var(--margin-control);
+}
+
+.action-group--row {
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.action-group--column {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.action-group--end {
+  justify-content: flex-end;
+}
+
+.action-group--column.action-group--end {
+  align-items: flex-end;
+  justify-content: flex-start;
+}
+
 /* src/components/attach/attach.css */
 .attach {
   /* color */
@@ -762,11 +788,11 @@
 /* src/components/field/field.css */
 .field {
   /* color */
-  --field-label-color: var(--color-text);
+/*  --field-label-color: var(--color-text);*/
   --field-message-color: var(--color-text-note);
   --field-error-color: var(--color-line-bad);
 
-  color: var(--field-label-color);
+/*  color: var(--field-label-color);*/
 
   /* typography */
   --field-label-font-family: var(--font-body-family);
@@ -801,7 +827,7 @@
 
 .field__label {
   /* color */
-  color: var(--field-label-color);
+/*  color: var(--field-label-color);*/  
 
   /* typography */
   font-family: var(--field-label-font-family);
@@ -879,6 +905,37 @@
   color: var(--field-error-color);
 }
 
+/* src/components/field-group/field-group.css */
+.field-group {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  --field-group-gap: var(--margin-form-field-vert);
+
+  display: flex;
+  align-items: stretch;
+  gap: var(--field-group-gap);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.field-group--row {
+  /* size */
+  flex-direction: row;
+}
+
+.field-group--column {
+  /* size */
+  flex-direction: column;
+}
+
 /* src/components/input/input.css */
 .input {
   /* color */
@@ -1885,6 +1942,14 @@
     border-color var(--tabs-transition-duration);
 }
 
+.tabs__tab,
+.tabs__tab:active,
+.tabs__tab:focus,
+.tabs__tab:hover {
+  /* typography */
+  text-decoration: none;
+}
+
 .tabs__tab--selected {
   /* color */
   --tabs-tab-bg: var(--tabs-tab-bg-selected);