@gtivr4/a1-design-system-react 0.9.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtivr4/a1-design-system-react",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "React components for the A1 token-driven design system.",
   "type": "module",
   "main": "./src/index.js",

package/src/color-scheme.css

@@ -44,6 +44,7 @@ body {
   color-scheme: dark;
   --semantic-color-surface-page:   var(--base-color-neutral-900);
   --semantic-color-surface-card:   var(--base-color-neutral-800);
+  --semantic-color-surface-field:  var(--base-color-neutral-700);
   --semantic-color-surface-panel:  var(--base-color-neutral-800);
   --semantic-color-surface-raised: var(--base-color-neutral-700);
   --semantic-color-text-default: var(--base-color-neutral-50);
@@ -277,6 +278,7 @@ html.a1-theme-dark {
   color-scheme: dark;
   --semantic-color-surface-page:   var(--base-color-neutral-900);
   --semantic-color-surface-card:   var(--base-color-neutral-800);
+  --semantic-color-surface-field:  var(--base-color-neutral-700);
   --semantic-color-surface-panel:  var(--base-color-neutral-800);
   --semantic-color-surface-raised: var(--base-color-neutral-700);
   --semantic-color-text-default: var(--base-color-neutral-50);
@@ -353,6 +355,7 @@ html.a1-theme-dark .a1-theme-light {
   color-scheme: light;
   --semantic-color-surface-page:   var(--base-color-neutral-0);
   --semantic-color-surface-card:   var(--base-color-neutral-0);
+  --semantic-color-surface-field:  var(--base-color-neutral-0);
   --semantic-color-surface-panel:  var(--base-color-neutral-50);
   --semantic-color-surface-raised: var(--base-color-neutral-100);
   --semantic-color-text-default: var(--base-color-neutral-900);
@@ -517,6 +520,7 @@ html.a1-theme-light {
 html.a1-theme-light .a1-inverse {
   color-scheme: dark;
   --semantic-color-surface-page:   var(--base-color-neutral-900);
+  --semantic-color-surface-field:  var(--base-color-neutral-700);
   --semantic-color-surface-panel:  var(--base-color-neutral-800);
   --semantic-color-surface-raised: var(--base-color-neutral-700);
   --semantic-color-text-default: var(--base-color-neutral-50);

package/src/components/checkbox-group/checkbox-group.css

@@ -177,7 +177,7 @@
   margin-top: var(--a1-cb-input-nudge);
   border: var(--component-field-border-width) solid var(--semantic-color-border-strong);
   border-radius: var(--a1-cb-radius);
-  background-color: var(--semantic-color-surface-page);
+  background-color: var(--semantic-color-surface-field);
   cursor: pointer;
   transition:
     border-color       var(--semantic-motion-duration-fast),

package/src/components/choice-group/choice-group.css

@@ -161,7 +161,7 @@
   padding-inline-start: calc(var(--a1-cg-padding) + var(--a1-cg-indicator-size) + var(--base-spacing-8));
   border: var(--component-choice-group-border-width) solid var(--semantic-color-border-subtle);
   border-radius: var(--component-choice-group-border-radius);
-  background-color: var(--semantic-color-surface-page);
+  background-color: var(--semantic-color-surface-field);
   cursor: pointer;
   transition:
     border-color     var(--semantic-motion-duration-fast) var(--semantic-motion-easing-standard),
@@ -271,7 +271,7 @@
   width: var(--a1-cg-indicator-size);
   height: var(--a1-cg-indicator-size);
   border: 1.5px solid var(--semantic-color-border-default);
-  background-color: var(--semantic-color-surface-page);
+  background-color: var(--semantic-color-surface-field);
   background-repeat: no-repeat;
   background-position: center;
   transition:

package/src/components/data-table/data-table.css

@@ -433,4 +433,15 @@
     flex-direction: column;
     align-items: flex-start;
   }
+
+  /* Notice rows span the full card width — suppress the column-label ::before
+     and reset td to block so the content fills edge-to-edge. */
+  .a1-data-table__notice-row td {
+    display: block;
+    padding: 0;
+  }
+
+  .a1-data-table__notice-row td::before {
+    display: none;
+  }
 }

package/src/components/definition-list/DefinitionList.jsx

@@ -1,6 +1,6 @@
 import { Children, isValidElement, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../button/Button.jsx";
 import { Heading } from "../heading/Heading.jsx";
-import { IconButton } from "../icon-button/IconButton.jsx";
 import "./definition-list.css";
 
 const directions = ["row", "column"];
@@ -86,13 +86,16 @@ function DefinitionCopyButton({ text, label = "Copy value", copiedLabel = "Copie
   }
 
   return (
-    <IconButton
+    <Button
       className="a1-definition-list__copy"
       icon={copied ? "check" : "content_copy"}
-      label={copied ? copiedLabel : label}
       onClick={handleCopy}
+      size="sm"
+      type="button"
       variant="tertiary"
-    />
+    >
+      {copied ? copiedLabel : label}
+    </Button>
   );
 }
 

package/src/components/definition-list/definition-list.css

@@ -52,7 +52,8 @@
 }
 
 .a1-definition-list__copy {
-  margin-block-start: calc((1lh - var(--component-icon-button-size)) / 2);
+  flex: 0 0 auto;
+  margin-block-start: calc((1lh - var(--component-button-small-height)) / 2);
 }
 
 .a1-definition-list--column {
@@ -99,10 +100,10 @@
 }
 
 .a1-definition-list__value-content {
-  flex: 1 1 auto;
+  flex: 0 1 auto;
 }
 
-@container (max-width: 360px) {
+@container (max-width: 240px) {
   .a1-definition-list--row .a1-definition-list__item {
     display: flex;
     flex-direction: column;

package/src/components/field/field.css

@@ -16,7 +16,7 @@
   --a1-field-accent-compensation:   var(--component-field-accent-compensation);
 
   /* interaction — hover/active/readonly values come from :root in color-scheme.css */
-  --a1-field-background:            var(--semantic-color-surface-page);
+  --a1-field-background:            var(--semantic-color-surface-field);
   --a1-field-border-color:          var(--semantic-color-border-strong);
   --a1-field-focus-ring-color:      var(--component-field-focus-ring-color);
   --a1-field-focus-ring-width:      var(--component-field-focus-ring-width);

package/src/components/fieldset/fieldset.css

@@ -51,7 +51,7 @@
 /* ─── Surface variant ────────────────────────────────────────────────────── */
 
 .a1-fieldset--surface {
-  background: var(--semantic-color-surface-page);
+  background: var(--semantic-color-surface-card);
   border: var(--component-card-border-width) solid var(--semantic-color-border-subtle);
   border-radius: var(--component-card-border-radius);
   box-shadow: var(--component-card-shadow);

package/src/components/inline-editable/inline-editable.css

@@ -29,7 +29,7 @@
   display: block;
   width: 100%;
   min-height: 2em;
-  background: var(--semantic-color-surface-page);
+  background: var(--semantic-color-surface-field);
   border: 1px solid var(--semantic-color-border-strong);
   border-radius: var(--base-border-radius-sm);
   padding: var(--base-spacing-4) var(--base-spacing-8);

package/src/components/radio-group/radio-group.css

@@ -174,7 +174,7 @@
   margin-top: var(--a1-rb-input-nudge);
   border: var(--component-field-border-width) solid var(--semantic-color-border-strong);
   border-radius: 50%;
-  background-color: var(--semantic-color-surface-page);
+  background-color: var(--semantic-color-surface-field);
   cursor: pointer;
   transition:
     border-color     var(--semantic-motion-duration-fast),

package/src/components/switch/switch.css

@@ -150,7 +150,7 @@
   height: var(--a1-sw-track-height);
   border-radius: var(--a1-sw-track-height);
   border: var(--component-field-border-width) solid var(--semantic-color-border-strong);
-  background-color: var(--semantic-color-surface-page);
+  background-color: var(--semantic-color-surface-field);
   cursor: pointer;
   transition:
     background-color var(--semantic-motion-duration-normal) var(--semantic-motion-easing-standard),

package/src/themes.css

@@ -365,6 +365,7 @@ html.a1-theme-fresh {
   --semantic-color-text-accent: var(--base-color-accent-600);
   --semantic-color-surface-page: #D7FFF8;
   --semantic-color-surface-card: var(--base-color-neutral-0);
+  --semantic-color-surface-field: var(--base-color-neutral-0);
   --semantic-color-surface-panel: var(--base-color-neutral-0);
   --semantic-color-surface-raised: var(--base-color-neutral-50);
   --semantic-color-border-subtle: var(--base-color-neutral-200);

package/src/tokens.css

@@ -183,6 +183,7 @@
   --semantic-color-text-accent: #7c3aed;
   --semantic-color-surface-page: #ffffff;
   --semantic-color-surface-card: #ffffff;
+  --semantic-color-surface-field: #ffffff;
   --semantic-color-surface-panel: #f0f6fe;
   --semantic-color-surface-raised: #e1e8f3;
   --semantic-color-surface-inverse: #060b14;