@corva/ui 3.70.0-7 → 3.70.0-8

package/mcp-server/server.mjs

@@ -231,7 +231,7 @@ const validateDsn = (dsn) => {
 
 const MCP_SERVER_VERSION = '1.4.0';
 
-var version = "3.70.0-7";
+var version = "3.70.0-8";
 
 const CORVA_UI_VERSION = version;
 
@@ -2477,9 +2477,27 @@ var componentsV2Data = [
 		props: [
 			{
 				name: "children",
-				type: "React.ReactNode",
+				type: "ReactNode",
 				required: false,
-				description: "Content"
+				description: ""
+			},
+			{
+				name: "ariaLabel",
+				type: "AriaAttributes['aria-label']",
+				required: false,
+				description: "Accessible name for the icon-only button."
+			},
+			{
+				name: "ariaLabelledBy",
+				type: "AriaAttributes['aria-labelledby']",
+				required: false,
+				description: ""
+			},
+			{
+				name: "ariaDescribedBy",
+				type: "AriaAttributes['aria-describedby']",
+				required: false,
+				description: ""
 			},
 			{
 				name: "onClick",
@@ -2564,18 +2582,18 @@ var componentsV2Data = [
 		examples: [
 			{
 				name: "Default",
-				description: "",
+				description: "Icon-only buttons must have an accessible name. Use `ariaLabel` when there is no visible element that can be referenced by `ariaLabelledBy`.",
 				code: "<ButtonIcon {...props}>\n    <SettingTwoIcon />\n  </ButtonIcon>"
 			},
 			{
 				name: "Sizes",
 				description: "Component supports 3 sizes through `size` prop:\n\n- `large`: use for large, very important buttons\n- `medium` (default): should be used in most cases\n- `small`: use when space is at a premium\n- `xs`: even smaller",
-				code: "<SbColumn>\n    <ButtonIcon size=\"large\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon size=\"medium\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon size=\"small\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon size=\"xs\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n  </SbColumn>"
+				code: "<SbColumn>\n    <ButtonIcon ariaLabel=\"Settings\" size=\"large\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" size=\"medium\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" size=\"small\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" size=\"xs\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n  </SbColumn>"
 			},
 			{
 				name: "Type",
 				description: "Component's appearance is controlled through the `type` prop:\n\n- `primary`: use primarily as a FAB\n- `secondary`: use for important actions\n- `tertiary` (default): use for regular actions\n- `secondaryBg`: secondary, with a background\n- `tertiaryBg`: tertiary, with a background",
-				code: "<SbColumn>\n    <ButtonIcon type=\"primary\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon type=\"secondary\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon type=\"tertiary\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon type=\"secondaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n  </SbColumn>"
+				code: "<SbColumn>\n    <ButtonIcon ariaLabel=\"Settings\" type=\"primary\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" type=\"secondary\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" type=\"tertiary\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" type=\"secondaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n  </SbColumn>"
 			}
 		],
 		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ButtonIcon/ButtonIcon.tsx",
@@ -3431,7 +3449,7 @@ var componentsV2Data = [
 		examples: [
 			{
 				name: "Default",
-				description: "",
+				description: "Keyboard: Enter, Space, or Arrow Down opens the picker. Arrow keys move through palette colors. In the custom picker, Left/Right adjust saturation, Up/Down adjust brightness, and the hue and opacity sliders support arrow keys, Page Up/Down, Home, and End. Hold Shift with an arrow key for a coarse adjustment.",
 				code: "{\n  const [value, setValue] = useState<string>();\n  return (\n    <ColorPicker\n      {...props}\n      value={value}\n      onChange={(value, ...rest) => {\n        setValue(value);\n        props.onChange?.(value, ...rest);\n      }}\n    />\n  );\n}"
 			},
 			{
@@ -8017,6 +8035,16 @@ var componentsV2Data = [
 					"end"
 				]
 			},
+			{
+				name: "rootTagName",
+				type: "'label' | 'div'",
+				required: false,
+				description: "HTML tag of the root element. Use `div` when `prefix`/`suffix` contain interactive\ncontrols — nested interactive elements inside a `label` are invalid for assistive tech",
+				enumValues: [
+					"label",
+					"div"
+				]
+			},
 			{
 				name: "onChange",
 				type: "(value: string, changeReason: TextInputChangeReason, event: ChangeEvent<HTMLInputElement>) => void",
@@ -20097,6 +20125,11 @@ var scssMixins = [
 		signature: "transparencyCheckerboard($checkerboardSize)",
 		description: "Add a checkerboard pattern background to indicate transparency."
 	},
+	{
+		name: "focusVisibleOutline",
+		signature: "focusVisibleOutline($borderRadius: null)",
+		description: ""
+	},
 	{
 		name: "transparencyTransparentIndicator",
 		signature: "transparencyTransparentIndicator($borderWidth: 1px)",
@@ -92560,6 +92593,9 @@ var migrationsData = [
 		],
 		autoDerived: {
 			addedProps: [
+				"ariaLabel",
+				"ariaLabelledBy",
+				"ariaDescribedBy",
 				"onMouseDown",
 				"onMouseUp",
 				"type",
@@ -93234,6 +93270,7 @@ var migrationsData = [
 				"label",
 				"size",
 				"labelPlacement",
+				"rootTagName",
 				"disabled",
 				"inputType",
 				"inputMode",
@@ -93615,6 +93652,7 @@ var migrationsData = [
 			addedProps: [
 				"size",
 				"labelPlacement",
+				"rootTagName",
 				"inputMode",
 				"clearable",
 				"inputContainerRef",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@corva/ui",
-  "version": "3.70.0-7",
+  "version": "3.70.0-8",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Shared components/utils for Corva ui projects",
   "keywords": [

package/styles/common.scss

@@ -151,6 +151,21 @@ $AppContainer-ContainerName: CorvaUI-AppContainer-root;
   background-size: $checkerboardSize $checkerboardSize;
 }
 
+// Design system focus state: crisp primary ring + 4px halo (palette/primary/p12)
+// https://www.figma.com/design/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=138328-22115
+@mixin focusVisibleOutline($borderRadius: null) {
+  // Transparent outline stays visible in Windows High Contrast Mode where box-shadow is not rendered
+  outline: 2px solid transparent;
+  box-shadow:
+    0 0 0 1px $palette_primary_main,
+    0 0 0 5px colorAlpha($palette_primary_main, 0.12);
+
+  // The ring follows the element's own border-radius; pass one for square elements
+  @if $borderRadius {
+    border-radius: $borderRadius;
+  }
+}
+
 @mixin transparencyTransparentIndicator($borderWidth: 1px) {
   position: relative;
 

package/styles/mixins.scss

@@ -36,6 +36,21 @@
   background-size: $checkerboardSize $checkerboardSize;
 }
 
+// Design system focus state: crisp primary ring + 4px halo (palette/primary/p12)
+// https://www.figma.com/design/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=138328-22115
+@mixin focusVisibleOutline($borderRadius: null) {
+  // Transparent outline stays visible in Windows High Contrast Mode where box-shadow is not rendered
+  outline: 2px solid transparent;
+  box-shadow:
+    0 0 0 1px $palette_primary_main,
+    0 0 0 5px colorAlpha($palette_primary_main, 0.12);
+
+  // The ring follows the element's own border-radius; pass one for square elements
+  @if $borderRadius {
+    border-radius: $borderRadius;
+  }
+}
+
 @mixin transparencyTransparentIndicator($borderWidth: 1px) {
   position: relative;